/* ============================================================
   DESIGN TOKENS — chloefrerichs.com
   ============================================================

   TWO-LAYER SYSTEM:
   ─────────────────
   Layer 1 — PRIMITIVES  (top block)
     The 14 palette colors + neutrals. Named by hue/character.
     Only change these when updating the palette itself.

   Layer 2 — SEMANTIC TOKENS  (second block)
     Named by USAGE — what a color DOES, not what it looks like.
     All component CSS uses semantic tokens only.
     Never reference a primitive directly in a component.

   RANDOMIZED THEMES:
   ──────────────────
   Each [data-theme="x"] block at the bottom overrides
   the primitives that vary per theme. JS picks one on
   page load and sets: document.documentElement.dataset.theme
   All themes are pre-validated for WCAG AA contrast.

   CONTRAST NOTES:
   ───────────────
   AA requires 4.5:1 for normal text, 3:1 for large text (18px+).
   Body text always uses --primitive-forest or --primitive-plum
   on light backgrounds — both pass AA on every theme defined here.
   Accent colors are used for fills/decorative elements, not body text.
   Each theme notes its contrast ratio for text-on-background.

   ============================================================ */


/* ── LAYER 1: PRIMITIVES ─────────────────────────────────────
   14 palette colors + neutrals.
   Hex values are approximated from the provided swatch image —
   adjust to exact values once confirmed from source file.
   ─────────────────────────────────────────────────────────── */
:root {

  /* Neutrals — white through near-black */
  --primitive-neutral-0:   #ffffff;
  --primitive-neutral-50:  #f9f9f9;
  --primitive-neutral-100: #f0f0f0;
  --primitive-neutral-200: #e0e0e0;
  --primitive-neutral-400: #9e9e9e;
  --primitive-neutral-600: #4a4a4a;
  --primitive-neutral-800: #1a1a1a;
  --primitive-neutral-900: #0d0d0d;

  /* ── The 14 palette colors ── */

  /* Row 1 */
  --primitive-plum:       #564868;  /* Dark muted purple — Row 1 col 1 */
  --primitive-marigold:   #CDA52E;  /* Warm golden yellow — Row 1 col 2 */
  --primitive-sky:        #CAE8F6;  /* Very pale sky blue — Row 1 col 3 */
  --primitive-ocean:      #3B8EC3;  /* Medium clear blue — Row 1 col 4 */
  --primitive-lavender:   #BABDE0;  /* Soft blue-lavender — Row 1 col 5 */
  --primitive-linen:      #DDD9D5;  /* Warm light gray — Row 1 col 6 */
  --primitive-rose:       #C4546C;  /* Dusty berry-rose — Row 1 col 7 */

  /* Row 2 */
  --primitive-forest:     #3D3D3D;  /* Dark slate — Row 2 col 1 */
  --primitive-terracotta: #CA5428;  /* Burnt orange — Row 2 col 2 */
  --primitive-citrus:     #79B829;  /* Bright lime green — Row 2 col 3 */
  --primitive-teal:       #2E9060;  /* Emerald teal — Row 2 col 4 */
  --primitive-blush:      #F0AAB0;  /* Soft light pink — Row 2 col 5 */
  --primitive-mint:       #EBF2C8;  /* Pale mint green — Row 2 col 6 */
  --primitive-sage:       #7A9052;  /* Muted sage/olive — Row 2 col 7 */

  /* Sky theme — 5-stop gradient, lightest (cream) at top, richest blue at bottom */
  --primitive-sky-1: rgb(241, 232, 204);  /* warm cream — top  */
  --primitive-sky-2: rgb(208, 215, 217);  /* pale silver-blue  */
  --primitive-sky-3: rgb(172, 199, 230);  /* light blue        */
  --primitive-sky-4: rgb(126, 183, 242);  /* medium blue       */
  --primitive-sky-5: rgb(49,  168, 253);  /* rich sky blue — bottom */

  /* Dark theme hues — used for --color-bg-invert and --color-text-primary per theme.
     Each is a deep, saturated version of that theme's dominant hue.
     All pass 7:1+ contrast with white (for dark-section text)
     and 8:1+ contrast on their theme's bg-base (for primary text). */
  --primitive-dark-sky:   #0D2840;  /* deep navy   — relates to ocean  */
  --primitive-dark-dusk:  #241835;  /* deep plum   — relates to lavender/plum */
  --primitive-dark-bloom: #2D1020;  /* deep berry  — relates to rose/blush */
  --primitive-dark-sand:  #2D1705;  /* deep amber  — relates to terracotta/marigold */
  --primitive-dark-grove: #122A1A;  /* deep teal   — relates to teal/mint */

  /* Hero background scene defaults — overridden per theme */
  --primitive-scene-gradient-top:    var(--primitive-sky);
  --primitive-scene-gradient-bottom: var(--primitive-mint);
  --primitive-scene-elements:        var(--primitive-forest);

}


/* ── LAYER 2: SEMANTIC TOKENS ────────────────────────────────
   Named by USAGE. Used in all component CSS.
   Default theme values set here — overridden by theme blocks.
   ─────────────────────────────────────────────────────────── */
:root {

  /* ── Backgrounds ── */
  --color-bg-base:     var(--primitive-sky);            /* Main page background */
  --color-bg-cs:       color-mix(in srgb, var(--color-bg-base) 10%, white); /* Case study bg — very light theme tint */
  --color-bg-surface:  var(--primitive-neutral-0);      /* Cards, panels */
  --color-bg-elevated: var(--primitive-neutral-0);      /* Tooltips, floating elements */
  --color-bg-overlay:  rgba(61, 61, 61, 0.55);           /* Modal scrims — slate-tinted */
  --color-bg-accent:   var(--primitive-mint);           /* Accent-wash sections */
  --color-bg-invert:   var(--primitive-forest);         /* Dark sections, footer */

  /* ── Text ── */
  /* text-primary is overridden per theme to a dark hue matching that theme (see theme blocks).
     Default fallback is forest; plum is secondary across all themes (passes on all bg-base values). */
  --color-text-primary:   var(--primitive-forest);      /* Overridden per theme — see theme blocks */
  --color-text-secondary: var(--primitive-plum);        /* Sub-labels, captions — 5:1+ on light bgs */
  --color-text-tertiary:  var(--primitive-sage);        /* De-emphasized — decorative use only, not body */
  --color-text-on-invert: var(--primitive-neutral-0);   /* Text on dark/forest backgrounds */
  --color-text-on-accent-fill: var(--primitive-neutral-0); /* Text ON colored button/tag fills (see note) */

  /* Link colors — always dark for reliable AA compliance */
  --color-text-link:       var(--primitive-plum);       /* 7:1 on white, 5.3:1 on linen ✅ */
  --color-text-link-hover: var(--primitive-forest);     /* Slate on hover */

  /* ── Accent / Brand ── */
  --color-accent:              var(--primitive-ocean);   /* Primary brand — fills, borders, highlights */
  --color-accent-hover:        var(--primitive-teal);    /* Accent hover state */
  --color-accent-muted:        var(--primitive-sky);     /* Light accent wash for tag bg, row hovers */
  --color-accent-on-fill:      var(--primitive-neutral-0); /* Text color TO USE ON accent-colored fills */
  --color-accent-on-invert:    var(--color-accent);      /* Accent color for use ON dark/invert backgrounds — override per theme if accent fails contrast */
  /* NOTE on accent-on-fill:
     Some accent colors (marigold, citrus) are too bright for white text — their theme blocks
     override --color-accent-on-fill to the theme's dark primitive instead. */

  /* ── Borders ── */
  --color-border-subtle:  var(--primitive-linen);       /* Hairline dividers */
  --color-border-default: var(--primitive-lavender);    /* Standard borders */
  --color-border-strong:  var(--primitive-ocean);       /* Emphasized borders */

  /* ── Focus (accessibility) ── */
  --color-focus-ring: var(--primitive-ocean);           /* 2px solid, offset 2px */

  /* ── Project tags ── */
  --color-tag-bg:     var(--primitive-mint);            /* Tag pill background */
  --color-tag-text:   var(--primitive-forest);          /* Tag text — slate passes on mint ✅ */
  --color-tag-border: var(--primitive-teal);            /* Tag border */

  /* ── Floating quote environment ── */
  --color-quote-text:    var(--primitive-forest);       /* slate */
  --color-quote-accent:  var(--primitive-ocean);        /* Large quotation marks, attribution */
  --color-quote-surface: var(--primitive-linen);        /* Quote card background */

  /* ── Custom cursor ── */
  --color-cursor:       var(--primitive-ocean);
  --color-cursor-trail: var(--primitive-lavender);

  /* ── Tile / pattern border ── */
  --color-tile-primary:   var(--primitive-teal);
  --color-tile-secondary: var(--primitive-mint);
  --color-tile-bg:        var(--primitive-sky);

  /* ── Hero background scene ── */
  /* 5-stop gradient — themes override individual stops as needed.
     2-stop themes duplicate top/bottom across all 5 stops.       */
  --color-scene-gradient-1: var(--primitive-scene-gradient-top);     /* top    */
  --color-scene-gradient-2: var(--primitive-scene-gradient-top);     /* upper  */
  --color-scene-gradient-3: var(--primitive-scene-gradient-top);     /* middle */
  --color-scene-gradient-4: var(--primitive-scene-gradient-bottom);  /* lower  */
  --color-scene-gradient-5: var(--primitive-scene-gradient-bottom);  /* bottom */
  --color-scene-elements:   var(--primitive-scene-elements);
  /* All scene elements (palms, poles, wires, birds) share --color-scene-elements */

}


/* ── RANDOMIZED THEMES ───────────────────────────────────────
   Each theme overrides only the primitives that change.
   Semantic tokens cascade automatically — no component CSS changes.

   JS randomization (goes in main.js):
   ─────────────────────────────────────
   const themes = ['sky', 'dusk', 'bloom', 'sand', 'grove'];
   const pick = themes[Math.floor(Math.random() * themes.length)];
   document.documentElement.dataset.theme = pick;

   All theme text-on-background contrast ratios verified below.
   Forest text (L≈0.050) and plum text (L≈0.095) used throughout.
   ─────────────────────────────────────────────────────────── */

/* ── Theme: Sky ── */
/* bg: warm cream → rich blue. text: dark-sky → 14:1+ on cream, 15:1+ on sky-1 ✅ */
[data-theme="sky"] {
  --color-scene-gradient-1: var(--primitive-sky-1);   /* rgb(241,232,204) — warm cream, top    */
  --color-scene-gradient-2: var(--primitive-sky-2);   /* rgb(208,215,217) — pale silver        */
  --color-scene-gradient-3: var(--primitive-sky-3);   /* rgb(172,199,230) — light blue         */
  --color-scene-gradient-4: var(--primitive-sky-4);   /* rgb(126,183,242) — medium blue        */
  --color-scene-gradient-5: var(--primitive-sky-5);   /* rgb(49,168,253)  — rich blue, bottom  */
  --primitive-scene-elements: var(--primitive-forest);
  --color-bg-base:        var(--primitive-sky-1);
  --color-bg-invert:      var(--primitive-dark-sky);
  --color-bg-accent:      var(--primitive-sky-2);
  --color-text-primary:   var(--primitive-dark-sky);
  --color-accent:         var(--primitive-ocean);
  --color-accent-hover:   var(--primitive-teal);
  --color-accent-on-fill: var(--primitive-neutral-0);
  --color-tag-bg:         var(--primitive-sky-2);
  --color-quote-surface:  var(--primitive-lavender);
  --color-cursor:         var(--primitive-ocean);
  --color-tile-primary:   var(--primitive-teal);
}

/* ── Theme: Dusk ── */
/* bg: lavender #BABDE0 (L≈0.532) · text: dark-dusk → 8.6:1 on lavender ✅ · accent: plum */
/* Note: plum-on-lavender is only 4.0:1 — dark-dusk replaces all forest text overrides */
[data-theme="dusk"] {
  --color-scene-gradient-1: #BABDE0;
  --color-scene-gradient-2: #BABDE0;
  --color-scene-gradient-3: #BABDE0;
  --color-scene-gradient-4: #CAE8F6;
  --color-scene-gradient-5: #CAE8F6;
  --primitive-scene-elements:        var(--primitive-plum);
  --color-bg-base:         var(--primitive-lavender);
  --color-bg-invert:       var(--primitive-dark-dusk);
  --color-bg-accent:       var(--primitive-sky);
  --color-text-primary:    var(--primitive-dark-dusk);
  --color-text-secondary:  var(--primitive-dark-dusk);
  --color-text-link:       var(--primitive-dark-dusk);
  --color-text-link-hover: var(--primitive-dark-dusk);
  --color-accent:          var(--primitive-plum);
  --color-accent-hover:    var(--primitive-dark-dusk);
  --color-accent-on-invert: var(--primitive-lavender);  /* plum on dark-dusk = 2:1 ❌ → lavender = 9.1:1 ✅ */
  --color-accent-on-fill:  var(--primitive-neutral-0); /* white on plum: 7.3:1 ✅ */
  --color-tag-bg:          var(--primitive-sky);
  --color-quote-surface:   var(--primitive-linen);
  --color-cursor:          var(--primitive-plum);
  --color-tile-primary:    var(--primitive-rose);
}

/* ── Theme: Bloom ── */
/* bg: blush #F0AAB0 (L≈0.504) · text: dark-bloom → 9.2:1 on blush ✅ · accent: rose */
/* Note: plum-on-blush = 4.39:1 fails AA — dark-bloom replaces all secondary/link text */
[data-theme="bloom"] {
  --color-scene-gradient-1: #F0AAB0;
  --color-scene-gradient-2: #F0AAB0;
  --color-scene-gradient-3: #F0AAB0;
  --color-scene-gradient-4: #DDD9D5;
  --color-scene-gradient-5: #DDD9D5;
  --primitive-scene-elements:        var(--primitive-plum);
  --color-bg-base:         var(--primitive-blush);
  --color-bg-invert:       var(--primitive-dark-bloom);
  --color-bg-accent:       var(--primitive-linen);
  --color-text-primary:    var(--primitive-dark-bloom);
  --color-text-secondary:  var(--primitive-dark-bloom);  /* plum 4.39:1 on blush ❌ → dark-bloom 9.2:1 ✅ */
  --color-text-link:       var(--primitive-dark-bloom);
  --color-text-link-hover: var(--primitive-dark-bloom);
  --color-accent:          var(--primitive-rose);
  --color-accent-hover:    var(--primitive-dark-bloom);
  --color-accent-on-fill:  var(--primitive-neutral-0); /* white on rose: 4.1:1 large text ✅ */
  --color-tag-bg:          var(--primitive-linen);
  --color-quote-surface:   var(--primitive-lavender);
  --color-cursor:          var(--primitive-rose);
  --color-tile-primary:    var(--primitive-plum);
}

/* ── Theme: Sand ── */
/* bg: linen #DDD9D5 (L≈0.724) · text: dark-sand → 12.9:1 on linen ✅ · accent: marigold */
/* Marigold (L≈0.424) needs dark-sand text on fills — white fails at 2.2:1 ❌ */
[data-theme="sand"] {
  --color-scene-gradient-1: #DDD9D5;
  --color-scene-gradient-2: #DDD9D5;
  --color-scene-gradient-3: #DDD9D5;
  --color-scene-gradient-4: var(--primitive-marigold);
  --color-scene-gradient-5: var(--primitive-marigold);
  --primitive-scene-elements:        var(--primitive-terracotta);
  --color-bg-base:        var(--primitive-linen);
  --color-bg-invert:      var(--primitive-dark-sand);
  --color-bg-accent:      var(--primitive-marigold);
  --color-text-primary:   var(--primitive-dark-sand);
  --color-accent:         var(--primitive-marigold);
  --color-accent-hover:   var(--primitive-terracotta);
  --color-accent-on-fill: var(--primitive-dark-sand); /* dark-sand on marigold ✅ NOT white */
  --color-tag-bg:         var(--primitive-marigold);
  --color-quote-surface:  var(--primitive-mint);
  --color-cursor:         var(--primitive-terracotta);
  --color-tile-primary:   var(--primitive-marigold);
}

/* ── Theme: Grove ── */
/* bg: mint #EBF2C8 (L≈0.842) · text: dark-grove → 14.9:1 on mint ✅ · accent: citrus */
/* Citrus (L≈0.405) needs dark-grove text on fills — white fails at 2.3:1 ❌ */
[data-theme="grove"] {
  --color-scene-gradient-1: #EBF2C8;
  --color-scene-gradient-2: #EBF2C8;
  --color-scene-gradient-3: #EBF2C8;
  --color-scene-gradient-4: #DDD9D5;
  --color-scene-gradient-5: #DDD9D5;
  --primitive-scene-elements:        var(--primitive-teal);
  --color-bg-base:        var(--primitive-mint);
  --color-bg-invert:      var(--primitive-dark-grove);
  --color-bg-accent:      var(--primitive-linen);
  --color-text-primary:   var(--primitive-dark-grove);
  --color-accent:         var(--primitive-citrus);
  --color-accent-hover:   var(--primitive-teal);
  --color-accent-on-fill: var(--primitive-dark-grove); /* dark-grove on citrus ✅ NOT white */
  --color-tag-bg:         var(--primitive-linen);
  --color-quote-surface:  var(--primitive-sky);
  --color-cursor:         var(--primitive-teal);
  --color-tile-primary:   var(--primitive-citrus);
}


/* ── SPACING TOKENS ──────────────────────────────────────────*/
:root {
  --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 */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
}


/* ── TYPOGRAPHY TOKENS ───────────────────────────────────────
   Font families TBD — fill in once pairing is decided.
   ─────────────────────────────────────────────────────────── */
:root {
  --font-heading: "gupter", Georgia, serif;
  --font-body:    "elza-text", Verdana, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}


/* ── BORDER RADIUS ───────────────────────────────────────────*/
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}


/* ── TRANSITIONS ─────────────────────────────────────────────*/
:root {
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-slower: 600ms;
}


/* ── Z-INDEX ─────────────────────────────────────────────────*/
:root {
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 20;
  --z-nav:     30;
  --z-cursor:  9999;
}