/* ═══════════════════════════════════════════════════════════════
   Cuemath Colour System — CSS Tokens
   Source of truth for all colour variables.

   3 layers: Primitive ramps → Semantic tokens → Theme switching
   Built in OKLCH, exported as hex for compatibility.

   Import: @import url('colour-tokens.css');
   Or link: <link rel="stylesheet" href="colour-tokens.css">
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   LAYER 1 — PRIMITIVE RAMP VALUES
   Raw colour steps. Never used directly in components.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── Neutral (Warm Charcoal) ─── H≈77° OKLCH ─── */
  /* Light end: neutral-0 (pure white) added as the "lifted" tier above the warm
     page bg, matching the Reducto / Claude.ai pattern. Steps 200 and 300
     brightened (2026-05-24) so sunken surfaces sit cleanly between page and
     wells. Dark end: neutral-1100 added as a deeper anchor, aligning with
     Anthropic / Reducto / Claude.ai dark backgrounds. */

  --neutral-0:    #FFFFFF;
  --neutral-100:  #FAF8F5;
  --neutral-200:  #F6F3ED;
  --neutral-300:  #EBE7E0;
  --neutral-400:  #C6C0B8;
  --neutral-500:  #97938C;
  --neutral-600:  #84807B;
  --neutral-700:  #5B5854;
  --neutral-800:  #43413E;
  --neutral-900:  #33312F;
  --neutral-1000: #292827;
  --neutral-1100: #1D1C1B;


  /* ─── Gold (Brand Primary) ─── H72°→H63° OKLCH ─── */

  --gold-100:  #FAF1E6;
  --gold-200:  #FAE6D0;
  --gold-300:  #FAD6AC;
  --gold-400:  #F6BE7C;
  --gold-500:  #F4AB52;
  --gold-600:  #EC9A32;
  --gold-700:  #CE7E12;
  --gold-800:  #A45F00;
  --gold-900:  #7E4800;
  --gold-1000: #603602;
  --gold-1100: #4A2902;


  /* ─── Error ─── H20° OKLCH (v3, 2026-05-24) ─── */

  --error-100:  #FFE9E9;
  --error-200:  #FFD6D5;
  --error-300:  #FFB8B7;
  --error-400:  #FF9595;
  --error-500:  #F97279;
  --error-600:  #E5555E;
  --error-700:  #C8444F;
  --error-800:  #A73941;
  --error-900:  #842D34;
  --error-1000: #652328;
  --error-1100: #4C1B1E;


  /* ─── Success ─── H152°→H155° OKLCH ─── */

  --success-100:  #ECF9EF;
  --success-200:  #DAF3E0;
  --success-300:  #BCEAC8;
  --success-400:  #96DCAA;
  --success-500:  #6AC88A;
  --success-600:  #42B36F;
  --success-700:  #28995A;
  --success-800:  #1C7C48;
  --success-900:  #1A623A;
  --success-1000: #164A2C;
  --success-1100: #103820;


  /* ─── Warning ─── H39°→H26° OKLCH (v6, 2026-05-24) ─── */
  /* Lights stay close to gold's brightness; darks rotate toward red-brown so
     the ramp diverges from gold at the extremes. */

  --warning-100:  #FFEFE1;
  --warning-200:  #FFDDC0;
  --warning-300:  #FFC89B;
  --warning-400:  #FFAB72;
  --warning-500:  #F68D50;
  --warning-600:  #E27535;
  --warning-700:  #BC551F;
  --warning-800:  #964217;
  --warning-900:  #763413;
  --warning-1000: #5B280F;
  --warning-1100: #471F0C;


  /* ─── Info ─── H257°→H260° OKLCH ─── */

  --info-100:  #EEF6FF;
  --info-200:  #DEECFF;
  --info-300:  #C1DCFF;
  --info-400:  #9CC6FF;
  --info-500:  #74ACFC;
  --info-600:  #5492F1;
  --info-700:  #407BD6;
  --info-800:  #3464B1;
  --info-900:  #2B508C;
  --info-1000: #223E6A;
  --info-1100: #182D52;


  /* ─── Purple ─── H315° OKLCH (v2, 2026-05-24) ─── */
  /* Modest chroma bump from C≈0.140 → C≈0.155 at peak so the 500 step
     reads in the same saturation register as gold/warning/error. */

  --purple-100:  #FAEDFF;
  --purple-200:  #F4DCFF;
  --purple-300:  #EBC4FF;
  --purple-400:  #E0A6FF;
  --purple-500:  #D386F7;
  --purple-600:  #C26FE2;
  --purple-700:  #A055BE;
  --purple-800:  #80408F;
  --purple-900:  #5F2D6D;
  --purple-1000: #451E50;
  --purple-1100: #311438;
}


/* ═══════════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS (Light Theme)
   These are the tokens components actually use.
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {

  /* ─── Backgrounds — 4-tier neutral surfaces ─── */
  /* bg-1: extreme tier — lifted white card above the warm page (light)
     bg-2: primary page bg
     bg-3: secondary sunken surface (cards within page, sidebars)
     bg-4: tertiary — wells, input fields, hover states */
  --bg-1:                 var(--neutral-0);
  --bg-2:                 var(--neutral-100);
  --bg-3:                 var(--neutral-200);
  --bg-4:                 var(--neutral-300);

  /* Back-compat aliases — existing components keep working. New code should
     reference --bg-1 through --bg-4 directly. */
  --bg-primary:           var(--bg-2);
  --bg-secondary:         var(--bg-3);
  --bg-tertiary:          var(--bg-4);

  --bg-inverse:           var(--neutral-1000);
  --bg-inverse-secondary: var(--neutral-800);

  /* ─── Text ─── */
  --text-primary:         var(--neutral-1000);
  /* Secondary and tertiary derive from --text-primary via opacity, so they
     pick up tinted-bg hues on tinted cards and read consistently across both
     warm and cool surfaces. Auto-flips with theme. */
  --text-secondary:       color-mix(in srgb, var(--text-primary) 70%, transparent);
  --text-tertiary:        color-mix(in srgb, var(--text-primary) 50%, transparent);
  --text-on-inverse:      var(--neutral-100);
  --text-brand:           var(--gold-700);
  --text-error:           var(--error-700);
  --text-success:         var(--success-700);
  --text-warning:         var(--warning-700);
  --text-info:            var(--info-700);
  --text-purple:          var(--purple-700);

  /* ─── Borders ─── */
  --border-primary:       var(--neutral-600);
  --border-secondary:     var(--neutral-400);
  --border-tertiary:      var(--neutral-300);
  --border-interactive:   var(--neutral-1000);
  --border-brand:         var(--gold-300);
  --border-error:         var(--error-300);
  --border-success:       var(--success-300);
  --border-warning:       var(--warning-300);
  --border-info:          var(--info-300);
  --border-purple:        var(--purple-300);

  /* ─── Borders (opacity-derived, for tinted surfaces) ─── */
  /* Same weight ladder as solid borders, but derives from --text-primary so the
     border picks up the surface hue. Use on cards/badges with bg-{accent}-1 or
     any tinted surface where solid neutral borders feel disconnected. Calibrated
     to match neutral solid borders on a neutral-100 surface. */

  --border-primary-soft:   color-mix(in srgb, var(--text-primary) 55%, transparent);
  --border-secondary-soft: color-mix(in srgb, var(--text-primary) 25%, transparent);
  --border-tertiary-soft:  color-mix(in srgb, var(--text-primary) 10%, transparent);

  /* ─── Functional Backgrounds ─── */
  --bg-brand:             var(--gold-500);
  --bg-error:             var(--error-500);
  --bg-success:           var(--success-500);
  --bg-warning:           var(--warning-500);
  --bg-info:              var(--info-500);
  --bg-purple:            var(--purple-500);

  /* Filled-accent hover — one step deeper on the ramp (light: +100, dark: -100).
     Use on .btn-primary, .btn-destructive, .btn-success, etc. */
  --bg-brand-hover:       var(--gold-600);
  --bg-error-hover:       var(--error-600);
  --bg-success-hover:     var(--success-600);
  --bg-warning-hover:     var(--warning-600);
  --bg-info-hover:        var(--info-600);
  --bg-purple-hover:      var(--purple-600);

  /* Accent surface levels — three steps per accent for tinted backgrounds.
     Mirrors the neutral bg-primary/secondary/tertiary pattern. */
  --bg-brand-1:           var(--gold-100);
  --bg-brand-2:           var(--gold-200);
  --bg-brand-3:           var(--gold-300);
  --bg-error-1:           var(--error-100);
  --bg-error-2:           var(--error-200);
  --bg-error-3:           var(--error-300);
  --bg-success-1:         var(--success-100);
  --bg-success-2:         var(--success-200);
  --bg-success-3:         var(--success-300);
  --bg-warning-1:         var(--warning-100);
  --bg-warning-2:         var(--warning-200);
  --bg-warning-3:         var(--warning-300);
  --bg-info-1:            var(--info-100);
  --bg-info-2:            var(--info-200);
  --bg-info-3:            var(--info-300);
  --bg-purple-1:          var(--purple-100);
  --bg-purple-2:          var(--purple-200);
  --bg-purple-3:          var(--purple-300);

  /* Back-compat aliases — *-subtle now points to *-1.
     New components should use *-1 directly. */
  --bg-brand-subtle:      var(--bg-brand-1);
  --bg-error-subtle:      var(--bg-error-1);
  --bg-success-subtle:    var(--bg-success-1);
  --bg-warning-subtle:    var(--bg-warning-1);
  --bg-info-subtle:       var(--bg-info-1);
  --bg-purple-subtle:     var(--bg-purple-1);
}


/* ═══════════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS (Dark Theme)
   Same token names, different ramp mappings.
   Swap is automatic — component code never changes.
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] {

  /* ─── Backgrounds — 4-tier neutral surfaces (dark) ─── */
  /* bg-1: extreme tier — deepest void below the standard page (dark mode)
     bg-2: primary page bg (same as light mode's role)
     bg-3: elevated surface (lighter than page in dark, sunken in light)
     bg-4: more elevated tier (wells / hover) */
  --bg-1:                 var(--neutral-1100);
  --bg-2:                 var(--neutral-1000);
  --bg-3:                 var(--neutral-900);
  --bg-4:                 var(--neutral-800);

  /* Back-compat aliases */
  --bg-primary:           var(--bg-2);
  --bg-secondary:         var(--bg-3);
  --bg-tertiary:          var(--bg-4);

  --bg-inverse:           var(--neutral-100);
  --bg-inverse-secondary: var(--neutral-200);

  /* ─── Text ─── */
  --text-primary:         var(--neutral-100);
  /* Same opacity-derived approach in dark — secondary/tertiary fade from the
     light --text-primary, picking up surface hue underneath. */
  --text-secondary:       color-mix(in srgb, var(--text-primary) 70%, transparent);
  --text-tertiary:        color-mix(in srgb, var(--text-primary) 50%, transparent);
  --text-on-inverse:      var(--neutral-1000);
  --text-brand:           var(--gold-500);
  --text-error:           var(--error-500);
  --text-success:         var(--success-500);
  --text-warning:         var(--warning-500);
  --text-info:            var(--info-500);
  --text-purple:          var(--purple-500);

  /* ─── Borders ─── */
  --border-primary:       var(--neutral-500);
  --border-secondary:     var(--neutral-700);
  --border-tertiary:      var(--neutral-800);
  --border-interactive:   var(--neutral-100);
  /* Accent borders: solid step 900 — middle ground that stays readable against
     the step-1100 accent fills without overpowering them. Light theme uses
     step 300 (same distance from fill, opposite direction). */
  --border-brand:         var(--gold-900);
  --border-error:         var(--error-900);
  --border-success:       var(--success-900);
  --border-warning:       var(--warning-900);
  --border-info:          var(--info-900);
  --border-purple:        var(--purple-900);

  /* ─── Borders (opacity-derived, for tinted surfaces) ─── */
  /* Slightly different opacity than light because the dark-mode neutral borders
     map to neutral-500/700/800 (closer to surface), not 600/400/300. Same visual
     weight as solid borders on the dark page. */

  --border-primary-soft:   color-mix(in srgb, var(--text-primary) 53%, transparent);
  --border-secondary-soft: color-mix(in srgb, var(--text-primary) 24%, transparent);
  --border-tertiary-soft:  color-mix(in srgb, var(--text-primary) 12%, transparent);

  /* ─── Functional Backgrounds ─── */
  --bg-brand:             var(--gold-500);
  --bg-error:             var(--error-500);
  --bg-success:           var(--success-500);
  --bg-warning:           var(--warning-500);
  --bg-info:              var(--info-500);
  --bg-purple:            var(--purple-500);

  /* Filled-accent hover — in dark theme, hover lightens (-100 on the ramp). */
  --bg-brand-hover:       var(--gold-400);
  --bg-error-hover:       var(--error-400);
  --bg-success-hover:     var(--success-400);
  --bg-warning-hover:     var(--warning-400);
  --bg-info-hover:        var(--info-400);
  --bg-purple-hover:      var(--purple-400);

  /* Accent surface levels — solid dark values (one step darker per level).
     Replaces the dilute HSL-overlay pattern that read as "muddy gray" on the
     warm-tinted neutral page bg. Each level uses primitive ramp values for
     consistency with light theme. */
  --bg-brand-1:           var(--gold-1100);
  --bg-brand-2:           var(--gold-1000);
  --bg-brand-3:           var(--gold-900);
  --bg-error-1:           var(--error-1100);
  --bg-error-2:           var(--error-1000);
  --bg-error-3:           var(--error-900);
  --bg-success-1:         var(--success-1100);
  --bg-success-2:         var(--success-1000);
  --bg-success-3:         var(--success-900);
  --bg-warning-1:         var(--warning-1100);
  --bg-warning-2:         var(--warning-1000);
  --bg-warning-3:         var(--warning-900);
  --bg-info-1:            var(--info-1100);
  --bg-info-2:            var(--info-1000);
  --bg-info-3:            var(--info-900);
  --bg-purple-1:          var(--purple-1100);
  --bg-purple-2:          var(--purple-1000);
  --bg-purple-3:          var(--purple-900);

  /* Back-compat aliases — *-subtle now points to *-1.
     This is a deliberate behaviour change in dark mode: the previous
     low-opacity HSL wash diluted into the warm neutral bg and lost the
     accent hue. The new value is a solid, readable dark accent surface. */
  --bg-brand-subtle:      var(--bg-brand-1);
  --bg-error-subtle:      var(--bg-error-1);
  --bg-success-subtle:    var(--bg-success-1);
  --bg-warning-subtle:    var(--bg-warning-1);
  --bg-info-subtle:       var(--bg-info-1);
  --bg-purple-subtle:     var(--bg-purple-1);
}