@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --ink: 32 33 36;
        --muted: 100 97 106;
        --line: 221 225 231;
        --paper: 246 247 249;
        --surface: 255 255 255;
        --brand: 48 21 42;
        --brand-dark: 31 13 27;
        --signal: 237 28 36;
    }

    html {
        background: rgb(var(--paper));
        scrollbar-gutter: stable;
        overflow-x: clip;
    }

    body {
        min-height: 100vh;
        max-width: 100%;
        overflow-x: clip;
        color: rgb(var(--ink));
        letter-spacing: 0;
        line-height: 1.5;
        text-rendering: optimizeLegibility;
        font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum";
        -webkit-font-smoothing: antialiased;
    }

    button,
    a,
    input,
    select,
    textarea,
    summary {
        -webkit-tap-highlight-color: transparent;
    }

    button,
    [role="button"],
    summary {
        touch-action: manipulation;
    }

    :focus-visible {
        outline: 2px solid rgb(var(--signal));
        outline-offset: 2px;
    }

    [x-cloak] {
        display: none !important;
    }

    ::selection {
        background: rgb(var(--signal) / 0.18);
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer components {
    .mb-skip-link {
        @apply fixed left-4 top-3 z-[80] -translate-y-20 bg-[#30152a] px-4 py-2 text-sm font-semibold text-white shadow-lg transition-transform focus:translate-y-0;
        border-radius: 5px;
    }

    .mb-panel {
        @apply border border-[#dde1e7] bg-white shadow-[0_1px_2px_rgba(48,21,42,0.035)];
        border-radius: 6px;
    }

    .mb-input {
        @apply min-h-11 w-full border-[#bfc5ce] bg-white px-3 text-sm text-[#202124] shadow-none placeholder:text-[#85818a] hover:border-[#9da4ae] focus:border-[#6e345d] focus:ring-2 focus:ring-[#6e345d]/20 disabled:cursor-not-allowed disabled:bg-[#f1f3f5] disabled:text-[#77737c];
        min-width: 0;
        max-width: 100%;
        border-radius: 5px;
    }

    textarea.mb-input {
        @apply py-2.5 leading-6;
    }

    .mb-input[aria-invalid="true"] {
        @apply border-[#d92d20];
    }

    .mb-label {
        @apply mb-1.5 block text-xs font-semibold leading-5 text-[#454149];
    }

    .mb-button-primary {
        @apply inline-flex min-h-11 items-center justify-center gap-2 border border-transparent bg-[#4a203f] px-4 text-sm font-semibold text-white transition duration-150 hover:bg-[#30152a] active:translate-y-px focus:outline-none focus:ring-2 focus:ring-[#c91822] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:active:translate-y-0;
        border-radius: 5px;
    }

    .mb-button-secondary {
        @apply inline-flex min-h-11 items-center justify-center gap-2 border border-[#c8cdd5] bg-white px-4 text-sm font-semibold text-[#493942] transition duration-150 hover:border-[#aeb4bd] hover:bg-[#f6f7f9] active:translate-y-px focus:outline-none focus:ring-2 focus:ring-[#c91822] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:active:translate-y-0;
        border-radius: 5px;
    }

    .mb-button-danger {
        @apply inline-flex min-h-11 items-center justify-center gap-2 border border-transparent bg-[#b42318] px-4 text-sm font-semibold text-white transition duration-150 hover:bg-[#912018] active:translate-y-px focus:outline-none focus:ring-2 focus:ring-[#d92d20] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
        border-radius: 5px;
    }

    .mb-icon-button {
        @apply inline-flex size-10 shrink-0 items-center justify-center border border-transparent text-[#64616a] transition duration-150 hover:border-[#d9dde3] hover:bg-[#f3f4f6] hover:text-[#202124] active:translate-y-px focus:outline-none focus:ring-2 focus:ring-[#c91822];
        border-radius: 5px;
    }

    .mb-alert-success,
    .mb-alert-error,
    .mb-alert-warning {
        @apply flex items-start gap-3 border px-4 py-3 text-sm font-medium;
        border-radius: 5px;
    }

    .mb-alert-success {
        @apply border-[#a6e5bd] bg-[#f0fbf4] text-[#166534];
    }

    .mb-alert-error {
        @apply border-[#f1b5b0] bg-[#fff4f3] text-[#a4261d];
    }

    .mb-alert-warning {
        @apply border-[#f1d49a] bg-[#fffaeb] text-[#854a0e];
    }

    .mb-empty-state {
        @apply px-5 py-14 text-center text-sm text-[#64616a];
    }

    .mb-empty-state strong {
        @apply block text-sm font-semibold text-[#202124];
    }

    .mb-panel table {
        font-variant-numeric: tabular-nums;
    }

    .mb-panel thead th {
        @apply whitespace-nowrap font-semibold;
    }

    .mb-panel tbody tr {
        @apply transition-colors duration-100;
    }

    .mb-panel tbody tr:hover {
        @apply bg-[#fafafb];
    }

    .mb-panel tbody td {
        @apply align-middle;
    }

    .mb-data {
        font-variant-numeric: tabular-nums;
    }

    .grid > .mb-panel,
    .grid > [class*="space-y-"],
    .grid > aside,
    .grid > label {
        min-width: 0;
    }

    #main-content {
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    main > [class~="p-4"],
    main > div > [class~="p-4"] {
        width: 100%;
        max-width: 100rem;
        margin-inline: auto;
    }
}