/* ====================================================================
   Grid Maker Pro — Design Tokens (Batch 96)
   --------------------------------------------------------------------
   Single source of truth for typography, color, spacing, motion,
   radius, shadow, and breakpoint values. Every other stylesheet
   (gmp.css, component partials, page styles) references these tokens
   instead of hardcoding values.

   Two themes: light (default) + dark (via prefers-color-scheme or
   manual override [data-theme="dark"]).
   ==================================================================== */

:root {
    /* === Typography scale (fluid, clamp-based) === */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Georgia", serif;

    --t-display-1: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);  /* 40 → 72 */
    --t-display-2: clamp(2rem, 4vw + 0.5rem, 3.5rem);    /* 32 → 56 */
    --t-h1: clamp(1.875rem, 3vw + 1rem, 2.75rem);        /* 30 → 44 */
    --t-h2: clamp(1.5rem, 2vw + 0.75rem, 2rem);          /* 24 → 32 */
    --t-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);      /* 20 → 24 */
    --t-h4: clamp(1.125rem, 1vw + 0.5rem, 1.25rem);      /* 18 → 20 */
    --t-body-lg: 1.125rem;       /* 18 */
    --t-body: 1rem;              /* 16 */
    --t-body-sm: 0.9375rem;      /* 15 */
    --t-caption: 0.8125rem;      /* 13 */
    --t-micro: 0.6875rem;        /* 11 */

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* === Color (light theme) === */
    /* Surfaces */
    --c-surface-1: #ffffff;
    --c-surface-2: #fafafa;
    --c-surface-3: #f4f4f5;
    --c-surface-4: #e4e4e7;

    /* Ink */
    --c-ink-1: #0a0a0a;        /* primary text */
    --c-ink-2: #404040;        /* secondary text */
    --c-ink-3: #737373;        /* tertiary / metadata */
    --c-ink-4: #a3a3a3;        /* disabled / placeholder */

    /* Accent (warm orange — refined from existing #ff7849) */
    --c-accent-50: #fff5ed;
    --c-accent-100: #ffe6d0;
    --c-accent-200: #ffc7a1;
    --c-accent-300: #ffa168;
    --c-accent-400: #ff7849;
    --c-accent-500: #f55a23;
    --c-accent-600: #e64216;
    --c-accent-700: #bd3214;
    --c-accent-800: #962a17;
    --c-accent-900: #7a2516;

    /* Semantic */
    --c-success: #16a34a;
    --c-warning: #d97706;
    --c-error: #dc2626;
    --c-info: #2563eb;

    /* Borders + dividers */
    --c-border: #e5e7eb;
    --c-border-strong: #d4d4d8;
    --c-divider: #f0f0f0;

    /* === Spacing scale (geometric, 4-px base) === */
    --s-0: 0;
    --s-1: 0.25rem;     /* 4  */
    --s-2: 0.5rem;      /* 8  */
    --s-3: 0.75rem;     /* 12 */
    --s-4: 1rem;        /* 16 */
    --s-5: 1.5rem;      /* 24 */
    --s-6: 2rem;        /* 32 */
    --s-7: 3rem;        /* 48 */
    --s-8: 4rem;        /* 64 */
    --s-9: 6rem;        /* 96 */
    --s-10: 8rem;       /* 128 */

    /* === Radius === */
    --r-sm: 0.25rem;    /* 4  */
    --r-md: 0.5rem;     /* 8  */
    --r-lg: 0.75rem;    /* 12 */
    --r-xl: 1rem;       /* 16 */
    --r-2xl: 1.5rem;    /* 24 */
    --r-pill: 9999px;

    /* === Shadow scale === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* === Motion === */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Breakpoints (used in @container queries and JS) === */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;

    /* === Z-index scale === */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 30;
    --z-fixed: 40;
    --z-overlay: 50;
    --z-modal: 60;
    --z-toast: 70;
    --z-tooltip: 80;

    /* === Content max-widths === */
    --w-prose: 65ch;
    --w-narrow: 720px;
    --w-content: 1100px;
    --w-wide: 1400px;
}

/* === Dark theme === */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-surface-1: #0a0a0a;
        --c-surface-2: #141414;
        --c-surface-3: #1f1f23;
        --c-surface-4: #2a2a2f;

        --c-ink-1: #f5f5f5;
        --c-ink-2: #d4d4d8;
        --c-ink-3: #a1a1aa;
        --c-ink-4: #71717a;

        --c-border: #27272a;
        --c-border-strong: #3f3f46;
        --c-divider: #1c1c1f;

        /* Slightly desaturated accent on dark to reduce eye strain */
        --c-accent-400: #ff8a5c;
        --c-accent-500: #ff7849;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    }
}

[data-theme="dark"] {
    --c-surface-1: #0a0a0a;
    --c-surface-2: #141414;
    --c-surface-3: #1f1f23;
    --c-surface-4: #2a2a2f;
    --c-ink-1: #f5f5f5;
    --c-ink-2: #d4d4d8;
    --c-ink-3: #a1a1aa;
    --c-ink-4: #71717a;
    --c-border: #27272a;
    --c-border-strong: #3f3f46;
    --c-divider: #1c1c1f;
    --c-accent-400: #ff8a5c;
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 0ms;
        --motion-base: 0ms;
        --motion-slow: 0ms;
    }
}