@import "tailwindcss";

/*
|--------------------------------------------------------------------------
| Q Advertising — Design System (2026)
|--------------------------------------------------------------------------
| Visual language derived from the site's service-navigation reference:
| light backgrounds, strong dark typography, bright green as the brand
| accent / active state, blue for interactive service links, thin subtle
| borders, flat surfaces, generous whitespace, corporate/functional.
| Tokens are exposed to Tailwind v4 via @theme so utilities are generated
| automatically (text-ink-900, bg-accent-500, text-link-600, etc.).
*/

@theme {
    /* Type — Inter throughout; headings use heavier weight + tighter tracking */
    --font-sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Ink — cool near-black text scale (slate) */
    --color-ink-50: #f8fafc;
    --color-ink-100: #f1f5f9;
    --color-ink-200: #e2e8f0;
    --color-ink-300: #cbd5e1;
    --color-ink-400: #94a3b8;
    --color-ink-500: #64748b;
    --color-ink-600: #475569;
    --color-ink-700: #334155;
    --color-ink-800: #1e293b;
    --color-ink-900: #0f172a;
    --color-ink-950: #020617;

    /* Paper — light neutral backgrounds (white + very light grey) */
    --color-paper-50: #ffffff;
    --color-paper-100: #f8fafc;
    --color-paper-200: #f1f5f9;
    --color-paper-300: #e2e8f0;

    /* Accent — bright green (brand / active / primary action) */
    --color-accent-50: #f0fdf4;
    --color-accent-100: #dcfce7;
    --color-accent-200: #bbf7d0;
    --color-accent-300: #86efac;
    --color-accent-400: #4ade80;
    --color-accent-500: #22c55e;
    --color-accent-600: #16a34a;
    --color-accent-700: #15803d;
    --color-accent-800: #166534;
    --color-accent-900: #14532d;

    /* Link — blue (interactive service links / selected content) */
    --color-link-50: #eff6ff;
    --color-link-100: #dbeafe;
    --color-link-200: #bfdbfe;
    --color-link-300: #93c5fd;
    --color-link-400: #60a5fa;
    --color-link-500: #3b82f6;
    --color-link-600: #2563eb;
    --color-link-700: #1d4ed8;
    --color-link-800: #1e40af;
    --color-link-900: #1e3a8a;

    /* Rhythm */
    --breakpoint-xs: 30rem;
    --radius-card: 0.625rem;
    --shadow-card: 0 1px 3px 0 rgb(15 23 42 / 0.06);
    --shadow-soft: 0 1px 2px 0 rgb(15 23 42 / 0.04);
}

/* Base */
@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
    }

    body {
        @apply bg-paper-100 text-ink-900 font-sans antialiased;
    }

    ::selection {
        background: var(--color-accent-500);
        color: white;
    }

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

    h1, h2, h3, h4 {
        @apply font-bold tracking-tight text-ink-900;
        text-wrap: balance;
    }

    p { text-wrap: pretty; }

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

/* Components */
@layer components {
    .shell {
        @apply mx-auto w-full max-w-7xl px-5 sm:px-8;
    }
    .shell-narrow {
        @apply mx-auto w-full max-w-4xl px-5 sm:px-8;
    }

    /* Small contextual label — green, uppercase, mono */
    .eyebrow {
        @apply inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-accent-700;
    }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold transition-colors duration-150;
        @apply focus-visible:outline-2 focus-visible:outline-offset-2;
    }
    .btn-primary {
        @apply bg-accent-600 text-white hover:bg-accent-700;
    }
    .btn-outline {
        @apply border border-ink-300 bg-white text-ink-800 hover:border-ink-900 hover:bg-ink-900 hover:text-white;
    }
    .btn-ghost {
        @apply text-ink-700 hover:bg-ink-100;
    }
    .btn-link {
        @apply text-link-600 hover:text-link-700 hover:underline underline-offset-4 font-medium;
    }

    /* Flat card — subtle border, minimal shadow */
    .card {
        @apply rounded-card bg-white border border-ink-200 shadow-soft;
    }

    /* Form fields */
    .field {
        @apply w-full rounded-md border border-ink-300 bg-white px-3.5 py-2.5 text-ink-900 placeholder:text-ink-400;
        @apply focus:border-accent-500 focus:ring-2 focus:ring-accent-500/15 outline-none transition-colors;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full border border-ink-200 bg-paper-100 px-3 py-1 text-xs font-medium text-ink-600;
    }

    .divider {
        @apply h-px w-full bg-ink-200;
    }

    /* Service link — blue, clickable, subtle underline treatment */
    .svc-link {
        @apply text-link-600 hover:text-link-700 font-medium underline-offset-4 hover:underline transition-colors;
    }

    /* Nav item — icon + label, green active state */
    .nav-item {
        @apply inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-ink-600 transition-colors duration-150 hover:text-ink-900 hover:bg-ink-100;
    }
    .nav-item-active {
        @apply text-accent-700 bg-accent-50;
    }

    .link-quiet {
        @apply text-ink-500 underline-offset-4 hover:text-link-600 hover:underline;
    }

    .prose-quiet h3 {
        margin-top: 2rem;
        margin-bottom: 0.75rem;
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-ink-900);
    }
    .prose-quiet p {
        margin-bottom: 1rem;
        line-height: 1.75;
        color: var(--color-ink-600);
    }
    .prose-quiet ul {
        margin: 1rem 0;
        padding-left: 1.25rem;
        list-style: disc;
    }
    .prose-quiet li {
        margin-bottom: 0.5rem;
        line-height: 1.7;
        color: var(--color-ink-700);
    }
    .prose-quiet strong {
        color: var(--color-ink-900);
    }
}

@utility text-balance { text-wrap: balance; }