/* ============================================================
   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-deep);
  --surface-tinted:  var(--color-lb-ice);
  --text-on-tinted:  var(--color-lb-deep);

  --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);

  /* ── PER-COMPONENT THEMED VALUES (light default) ──
     Cascade like the semantic aliases above: a nested [data-theme="light"]
     or [data-theme="dark"] wrapper overrides these locally, regardless of
     the page's own OS-level dark state — this is what lets a specimen
     card show a forced-light demo next to a forced-dark one. */
  --badge-blue-bg:      var(--color-lb-ice);
  --badge-blue-fg:      var(--color-lb-deep);
  --badge-blue-border:  var(--color-lb-core);
  --badge-green-bg:     var(--color-sage);
  --badge-green-fg:     var(--color-deep-green);
  --badge-green-border: var(--color-deep-green);
  --badge-neutral-bg:     var(--color-warm);
  --badge-neutral-fg:     var(--color-void);
  --badge-neutral-border: var(--color-ash);
  --btn-ghost-fg:        var(--color-lb-core);
  --btn-ghost-border:    var(--color-lb-core);
  --btn-ghost-hover-bg:  var(--color-lb-ice);
  --btn-neutral-bg:        var(--color-stone);
  --btn-neutral-fg:        var(--color-ink);
  --btn-neutral-border:    var(--color-stone);
  --btn-neutral-hover-bg:  var(--color-ash);
  --btn-neutral-hover-fg:  #fff;
  --card-warm-bg:      var(--color-warm);
  --card-warm-border:  var(--color-stone);
  --card-tinted-border: var(--color-lb-ghost);
  --input-focus-border: var(--color-lb-core);
  --input-focus-shadow: var(--shadow-focus);
  --focus-ring-color:  var(--color-lb-core);
}

/* ── DARK-MODE SEMANTIC ALIASES ──
   Two ways in, same result — matches the production site (dashone.ai):
   (1) auto via `prefers-color-scheme: dark` (OS-level, the site's default)
   (2) forced via `[data-theme="dark"]` on any subtree (dark-native products
       like a dashboard, regardless of OS setting). `[data-theme="light"]`
       opts back out of an inherited OS dark preference.
   On dark-bg, Luminous Blue reads as clean neon — no glow effects needed.
   lb-core FAILS AA as text on a dark card surface (~2:1) — text-accent /
   text-link use lb-mist there instead. */
@media (prefers-color-scheme: dark) {
  :root {
    --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);
    --surface-tinted:  rgba(27, 31, 232, 0.15);

    --text-primary:    var(--color-stone);
    --text-secondary:  rgba(216, 214, 206, 0.62);
    --text-muted:      rgba(136, 135, 128, 0.7);
    --text-accent:     var(--color-lb-mist);
    --text-on-tinted:  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);
  }
}
[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);
  --surface-tinted:  rgba(27, 31, 232, 0.15);

  --text-primary:    var(--color-stone);
  --text-secondary:  rgba(216, 214, 206, 0.62);
  --text-muted:      rgba(136, 135, 128, 0.7);
  --text-accent:     var(--color-lb-mist);
  --text-on-tinted:  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);
}

/* Forces LIGHT on a subtree even when the OS/media context is dark —
   lets specimen cards show both variants side by side regardless of
   the viewer's OS setting. Wins locally because custom properties
   resolve from the nearest declaring ancestor. */
[data-theme="light"] {
  --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);
  --surface-tinted:  var(--color-lb-ice);

  --text-primary:    var(--color-void);
  --text-secondary:  var(--color-ink);
  --text-muted:      var(--color-ash);
  --text-accent:     var(--color-lb-deep);
  --text-on-tinted:  var(--color-lb-deep);

  --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);
}