@import "tailwindcss";

/*
| Boss Of AI design tokens
| Base: true black, white, one neutral scale.
| Accent: a single amber signal used for value, scores and state.
| It never carries body text on white; it fills, underlines and marks.
*/
@theme {
    --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --color-ink: #000000;
    --color-paper: #ffffff;

    --color-graphite-50: #f7f7f6;
    --color-graphite-100: #ededea;
    --color-graphite-200: #dededa;
    --color-graphite-300: #c5c5bf;
    --color-graphite-400: #9a9a94;
    --color-graphite-500: #74746e;
    --color-graphite-600: #545450;
    --color-graphite-700: #343431;
    --color-graphite-800: #1d1d1b;
    --color-graphite-900: #111110;

    --color-signal: #f0b429;
    --color-signal-soft: #fdf1d6;
    --color-signal-deep: #7a5200;

    --text-display: 4.25rem;
    --text-display--line-height: 0.94;
    --text-display--letter-spacing: -0.035em;
}

@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-sans);
        color: var(--color-ink);
        background-color: var(--color-paper);
        font-feature-settings: "ss01", "cv05";
    }

    h1, h2, h3, h4 {
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: -0.025em;
    }

    :focus-visible {
        outline: 2px solid var(--color-ink);
        outline-offset: 3px;
        border-radius: 2px;
    }

    ::selection {
        background: var(--color-signal);
        color: var(--color-ink);
    }
}

@layer components {
    /* One shared button vocabulary so the CTA never drifts between pages. */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.8125rem 1.375rem;
        font-weight: 500;
        font-size: 0.9375rem;
        line-height: 1;
        border-radius: 6px;
        transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    }

    .btn-primary {
        background: var(--color-ink);
        color: var(--color-paper);
    }

    .btn-primary:hover {
        background: var(--color-graphite-800);
    }

    .btn-signal {
        background: var(--color-signal);
        color: var(--color-ink);
        font-weight: 600;
    }

    .btn-signal:hover {
        background: #ffc94a;
    }

    .btn-outline {
        border: 1px solid var(--color-graphite-300);
        color: var(--color-ink);
        background: transparent;
    }

    .btn-outline:hover {
        border-color: var(--color-ink);
    }

    .btn-ghost-dark {
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: var(--color-paper);
    }

    .btn-ghost-dark:hover {
        border-color: var(--color-paper);
    }

    .field {
        width: 100%;
        border: 1px solid var(--color-graphite-300);
        border-radius: 6px;
        padding: 0.75rem 0.875rem;
        font-size: 0.9375rem;
        background: var(--color-paper);
    }

    .field:focus {
        border-color: var(--color-ink);
        outline: none;
        box-shadow: 0 0 0 3px var(--color-signal-soft);
    }

    .shell {
        width: 100%;
        max-width: 74rem;
        margin-inline: auto;
        padding-inline: 1.25rem;
    }

    @media (min-width: 768px) {
        .shell { padding-inline: 2rem; }
    }
}

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

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