/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   One source of truth for colour, type, space, material and
   motion. Page stylesheets must reference these and must never
   hardcode a hex value or redefine a token — a page that needs a
   new colour adds it here so both themes stay in sync.

   Structure:
     1. Primitive ramps  (--stone-*, --amber-* …)  raw values
     2. Semantic tokens  (--text-primary, --danger …) intent
   Only semantic tokens are flipped by .dark-mode. Page CSS should
   reach for semantic tokens; primitives exist to define them.
   ============================================================ */

:root {
    /* ---- 1. PRIMITIVE RAMPS ---- */

    /* Warm neutral (stone). The app's grey is warm, never cool —
       #999/#ddd-style cool greys clash with the amber accent. */
    --stone-0:   #ffffff;
    --stone-50:  #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;

    /* Accent (amber/copper) — the brand colour */
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    --amber-950: #451a03;

    /* Status ramps */
    --green-100: #d1fae5;
    --green-300: #6ee7b7;
    --green-400: #4ade80;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-800: #065f46;
    --green-900: #064e3b;

    --red-100: #fee2e2;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;

    --yellow-500: #eab308;
    --yellow-600: #ca8a04;

    --blue-100: #dbeafe;
    --blue-300: #93c5fd;
    --blue-500: #3b82f6;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --purple-500: #a855f7;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;

    /* Decorative, non-semantic. Used by illustrated bits (the shelf on the
       rewards page) and the deliberately garish roast overlay. Kept here so
       there is still one place to change them, but they carry no meaning
       and must not be reused as UI colours. */
    --wood-light: #8b4513;
    --wood-dark: #654321;
    --wood-edge: #5d3a1a;
    --roast-flame: #ff6b35;
    --roast-ember: #ff4444;
    --roast-bg-a: #1a1a1a;
    --roast-bg-b: #2d1f1f;

    /* ---- 2. SEMANTIC: SURFACES & TEXT ---- */
    --bg-primary: var(--stone-50);      /* page ground */
    --bg-secondary: var(--stone-0);     /* raised card */
    --bg-tertiary: var(--stone-100);    /* recessed well / header strip */
    --bg-hover: var(--stone-200);
    --card-bg: var(--stone-0);          /* alias for --bg-secondary, used in templates */
    --bg-column: var(--stone-100);      /* kanban / archive column ground */
    --input-bg: var(--stone-0);

    --text-primary: var(--stone-900);
    --text-secondary: var(--stone-600);
    --text-tertiary: var(--stone-500);
    --text-muted: var(--stone-400);
    --text-on-accent: var(--stone-0);   /* text sitting on a filled accent */

    --border-color: var(--stone-200);
    --border-strong: var(--stone-300);  /* border on an already-raised surface */

    /* ---- SEMANTIC: ACCENT ---- */
    --accent-color: var(--amber-600);
    --accent-hover: var(--amber-700);
    --accent-light: var(--amber-400);
    --accent-subtle: rgba(217, 119, 6, 0.1);
    --accent-border: rgba(217, 119, 6, 0.35);

    /* ---- SEMANTIC: STATUS ---- */
    --success: var(--green-600);
    --success-subtle: rgba(22, 163, 74, 0.1);
    --success-text: var(--green-800);
    --warning: var(--yellow-600);
    --warning-subtle: rgba(202, 138, 4, 0.12);
    --warning-text: var(--amber-800);
    --danger: var(--red-600);
    --danger-subtle: rgba(220, 38, 38, 0.1);
    --danger-text: var(--red-800);
    --info: var(--blue-500);
    --info-subtle: rgba(59, 130, 246, 0.12);
    --purple-subtle: rgba(168, 85, 247, 0.12);
    --info-text: var(--blue-800);

    /* Code surfaces stay dark in both themes — a code block reads as a
       terminal, and flipping it to white breaks that metaphor. */
    --code-bg: var(--stone-900);
    --code-text: var(--stone-200);

    /* Syntax highlighting (SQL editor) */
    --syntax-keyword: var(--violet-600);
    --syntax-string: var(--green-600);
    --syntax-number: var(--amber-600);

    /* ---- 3. TYPE SCALE ----
       Apple's rule: tracking and leading are size-specific, never one
       value for all sizes. Large text reads too loose, so tracking goes
       negative as size grows; small text needs a touch of positive
       tracking for legibility. Leading tightens as size grows.
       Sizes are rem so they scale with the user's text-size setting. */
    --text-2xs: 0.6875rem;  --tracking-2xs: 0.01em;    --leading-2xs: 1.45;
    --text-xs:  0.75rem;    --tracking-xs:  0.006em;   --leading-xs:  1.45;
    --text-sm:  0.8125rem;  --tracking-sm:  0.003em;   --leading-sm:  1.5;
    --text-base:0.875rem;   --tracking-base:0;         --leading-base:1.55;
    --text-md:  1rem;       --tracking-md:  -0.003em;  --leading-md:  1.5;
    --text-lg:  1.125rem;   --tracking-lg:  -0.006em;  --leading-lg:  1.45;
    --text-xl:  1.375rem;   --tracking-xl:  -0.011em;  --leading-xl:  1.3;
    --text-2xl: 1.75rem;    --tracking-2xl: -0.016em;  --leading-2xl: 1.2;
    --text-3xl: 2.25rem;    --tracking-3xl: -0.021em;  --leading-3xl: 1.12;
    --text-4xl: 3rem;       --tracking-4xl: -0.026em;  --leading-4xl: 1.05;

    /* Weights — hierarchy comes from weight + size + leading as a set,
       not size alone. Weight adds presence without taking more space. */
    /* Uppercase micro-labels are the one place a wide track is correct:
       caps have no ascenders or descenders to carry the eye along. */
    --tracking-caps: 0.06em;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---- 4. SPACING SCALE ----
       rem-based so layout grows with the text rather than breaking. */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px  */
    --space-2: 0.5rem;    /* 8px  */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* ---- 5. RADII ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 22px;
    --radius-full: 999px;
    --radius: var(--radius-md);   /* bare --radius was referenced but never defined */

    /* ---- 6. ELEVATION ----
       Bigger surfaces read as thicker: more blur, deeper shadow. */
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04);
    --shadow-xl: 0 20px 30px -8px rgba(28, 25, 23, 0.14), 0 8px 12px -6px rgba(28, 25, 23, 0.07);

    /* ---- 7. MATERIALS ----
       Translucent chrome that content scrolls underneath, rather than
       opaque bars that eat a fixed strip. Weight encodes hierarchy:
       thick separates structural regions, thin draws attention to
       interactive elements. Never stack two light materials. */
    --material-thin:    rgba(255, 255, 255, 0.55);
    --material-regular: rgba(255, 255, 255, 0.72);
    --material-thick:   rgba(255, 255, 255, 0.94);
    --material-blur-sm: blur(12px) saturate(160%);
    --material-blur-md: blur(20px) saturate(180%);
    --material-blur-lg: blur(36px) saturate(190%);
    /* Bright top edge = light catching the lip of the material */
    --material-edge: rgba(255, 255, 255, 0.6);
    --scrim: rgba(28, 25, 23, 0.4);
    --scrim-fade: rgba(28, 25, 23, 0.06);   /* short gradient under floating chrome */

    /* ---- 8. MOTION ----
       Paired easings so a reversible transition mirrors its own path:
       out and in are inverse control points of each other. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in:  cubic-bezier(0.64, 0, 0.78, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-instant: 90ms;
    --duration-fast: 140ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;
    --transition: all var(--duration-fast) var(--ease-standard);
}

.dark-mode {
    /* Only semantic tokens flip. Primitives stay fixed so a ramp
       reference means the same thing in both themes. */
    --bg-primary: var(--stone-950);
    --bg-secondary: var(--stone-900);
    --bg-tertiary: var(--stone-800);
    --bg-hover: var(--stone-700);
    --card-bg: var(--stone-900);
    --bg-column: var(--stone-900);
    --input-bg: var(--stone-900);

    --text-primary: var(--stone-50);
    --text-secondary: var(--stone-400);
    --text-tertiary: var(--stone-500);
    --text-muted: var(--stone-500);
    --text-on-accent: var(--stone-950);

    --border-color: var(--stone-800);
    --border-strong: var(--stone-700);

    --accent-color: var(--amber-500);
    --accent-hover: var(--amber-400);
    --accent-subtle: rgba(245, 158, 11, 0.15);
    --accent-border: rgba(245, 158, 11, 0.4);

    --success-text: var(--green-300);
    --warning-text: var(--amber-300);
    --danger-text: var(--red-300);
    --info-text: var(--blue-300);
    --success-subtle: rgba(34, 197, 94, 0.16);
    --warning-subtle: rgba(234, 179, 8, 0.16);
    --danger-subtle: rgba(239, 68, 68, 0.16);
    --info-subtle: rgba(59, 130, 246, 0.18);
    --purple-subtle: rgba(168, 85, 247, 0.2);

    --code-bg: var(--stone-950);
    --code-text: var(--stone-300);

    --syntax-keyword: var(--violet-400);
    --syntax-string: var(--green-400);
    --syntax-number: var(--amber-400);

    /* Shadows go darker and deeper — on a dark ground, elevation reads
       through shadow spread rather than shadow darkness alone. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 20px -4px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 40px -10px rgba(0, 0, 0, 0.7);

    --material-thin:    rgba(28, 25, 23, 0.6);
    --material-regular: rgba(28, 25, 23, 0.76);
    --material-thick:   rgba(28, 25, 23, 0.94);
    --material-edge: rgba(255, 255, 255, 0.08);
    --scrim: rgba(0, 0, 0, 0.6);
    --scrim-fade: rgba(0, 0, 0, 0.35);
}