/* ============================================================
   COLORS — Lumina 2027 / Luminous Blue
   Coloro 125-28-38 · WGSN Color of the Year
   Base ramp + neutrals + structure + dark surfaces + semantic.
   ============================================================ */

:root {

  /* ── LUMINOUS BLUE RAMP — the 10% accent ── */
  --color-lb-ice:    #EAEBFF;   /* tinted bg fills, subtle highlights */
  --color-lb-ghost:  #C5C8FF;   /* light borders, disabled states */
  --color-lb-mist:   #7B80FF;   /* dark-mode body text on blue */
  --color-lb-glow:   #4B52FF;   /* HOVER state for CTAs */
  --color-lb-vivid:  #2328FF;   /* high-energy accents */
  --color-lb-core:   #1B1FE8;   /* PRIMARY — buttons, links, badges */
  --color-lb-deep:   #0E11B0;   /* active / pressed state */

  /* ── NEUTRALS — the 60% dominant ── */
  --color-chalk:     #F7F6F2;   /* default page bg (light) */
  --color-warm:      #EDE8D8;   /* section alternates, card bg */
  --color-maize:     #F5E6A3;   /* highlight bg, callout blocks */
  --color-stone:     #D8D6CE;   /* dividers, inactive borders */
  --color-ash:       #888780;   /* placeholder text, disabled */
  --color-ink:       #444441;   /* secondary text */
  --color-void:      #1C1A18;   /* primary text (light mode) */

  /* ── STRUCTURE — the 30% (slate azulado + pine) ── */
  --color-deep-green:#1C2130;   /* nav, footer — slate azulado oscuro */
  --color-forest:    #252C3E;   /* secondary sidebar, sub-nav */
  --color-pine:      #1E2A22;   /* discreet near-black green, minimal accent */
  --color-dust:      #38405A;   /* borders & dividers on dark surfaces */
  --color-sage:      #C6E8D4;   /* light tint for badges over pine */

  /* ── DARK-MODE SURFACES ── */
  --color-dark-bg:      #0A0B1A;  /* page background */
  --color-dark-surface: #12152B;  /* card / panel surface */
  --color-dark-card:    #1A1E38;  /* elevated card */
  --color-dark-border:  #252847;  /* subtle border */
  --color-dark-muted:   #3A3D5C;  /* disabled / muted border */

  /* ── SEMANTIC — states only, never structure ── */
  --color-success:    #1A5C42;
  --color-success-bg: #C6E8D4;
  --color-warning:    #B07D00;
  --color-warning-bg: #FFF3C4;
  --color-error:      #A32D2D;
  --color-error-bg:   #FCEBEB;
  --color-info:       var(--color-lb-core);
  --color-info-bg:    var(--color-lb-ice);

  /* ── SEMANTIC ALIASES (light) — prefer these in product code ── */
  --surface-page:    var(--color-chalk);
  --surface-alt:     var(--color-warm);
  --surface-card:    var(--color-chalk);
  --surface-sunken:  var(--color-warm);
  --surface-nav:     var(--color-deep-green);
  --surface-footer:  var(--color-deep-green);
  --surface-invert:  var(--color-dark-bg);

  --text-primary:    var(--color-void);
  --text-secondary:  var(--color-ink);
  --text-muted:      var(--color-ash);
  --text-on-dark:    rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(198, 232, 212, 0.62);
  --text-accent:     var(--color-lb-core);

  --border-subtle:   var(--color-stone);
  --border-strong:   var(--color-ink);
  --border-accent:   var(--color-lb-core);

  --action-primary:  var(--color-lb-core);
  --action-hover:    var(--color-lb-glow);
  --action-active:   var(--color-lb-deep);
  --action-disabled: var(--color-ash);
}

/* ── DARK-MODE SEMANTIC ALIASES ──
   Opt-in scope: add data-theme="dark" to any subtree (or <html>).
   On dark-bg, Luminous Blue reads as clean neon — no glow effects needed. */
[data-theme="dark"] {
  --surface-page:    var(--color-dark-bg);
  --surface-alt:     var(--color-dark-surface);
  --surface-card:    var(--color-dark-surface);
  --surface-sunken:  var(--color-dark-bg);
  --surface-nav:     var(--color-dark-surface);
  --surface-footer:  var(--color-dark-surface);
  --surface-invert:  var(--color-chalk);

  --text-primary:    rgba(255, 255, 255, 0.92);
  --text-secondary:  rgba(216, 214, 206, 0.62);
  --text-muted:      rgba(136, 135, 128, 0.7);
  --text-accent:     var(--color-lb-mist);

  --border-subtle:   var(--color-dark-border);
  --border-strong:   var(--color-dark-muted);
  --border-accent:   var(--color-lb-mist);

  --action-primary:  var(--color-lb-core);
  --action-hover:    var(--color-lb-glow);
  --action-active:   var(--color-lb-deep);
}