/* ============================================================
   COLORS — Lumina · paleta NetPay (default)
   Azul NetPay #116EF0 como acento, neutrales gris frío,
   estructura azul marino. Los nombres de token no cambian:
   la escala, spacing, motion y componentes siguen siendo Lumina.
   ============================================================ */

:root {

  /* ── BLUE RAMP — the 10% accent (azul NetPay) ── */
  --color-lb-ice:    #E7F0FE;   /* tinted bg fills, subtle highlights */
  --color-lb-ghost:  #BBD5FB;   /* light borders, disabled states */
  --color-lb-mist:   #9FC2F7;   /* dark-mode body text on blue */
  --color-lb-glow:   #4A8FF7;   /* HOVER state for CTAs */
  --color-lb-vivid:  #2A7DF4;   /* high-energy accents */
  --color-lb-core:   #116EF0;   /* PRIMARY — buttons, links, badges */
  --color-lb-deep:   #0B4FB5;   /* active / pressed state */

  /* ── NEUTRALS — the 60% dominant ── */
  --color-chalk:     #F7F7F7;   /* default page bg (light) */
  --color-warm:      #EFF1F4;   /* section alternates, card bg */
  --color-maize:     #FFF3C4;   /* highlight bg, callout blocks */
  --color-stone:     #E3E6EB;   /* dividers, inactive borders */
  --color-ash:       #7C8798;   /* placeholder text, disabled */
  --color-ink:       #33415A;   /* secondary text */
  --color-void:      #0B1B33;   /* primary text (light mode) */

  /* ── STRUCTURE — the 30% (azul marino NetPay) ── */
  --color-deep-green:#0B1B33;   /* nav, footer — azul marino profundo */
  --color-forest:    #14294A;   /* secondary sidebar, sub-nav */
  --color-pine:      #4A5A70;   /* slate medio, acento discreto */
  --color-dust:      #2C4467;   /* borders & dividers on dark surfaces */
  --color-sage:      #CFE6EC;   /* light tint for badges over dark */

  /* ── DARK-MODE SURFACES ── */
  --color-dark-bg:      #061225;  /* page background */
  --color-dark-surface: #0B1B33;  /* card / panel surface */
  --color-dark-card:    #14294A;  /* elevated card */
  --color-dark-border:  #22385C;  /* subtle border */
  --color-dark-muted:   #3A5175;  /* disabled / muted border */

  /* ── SEMANTIC — states only, never structure ── */
  --color-success:    #0E6B4F;
  --color-success-bg: #D6F1E4;
  --color-warning:    #9A6A00;
  --color-warning-bg: #FFF3C4;
  --color-error:      #B02525;
  --color-error-bg:   #FCEBEB;
  --color-info:       var(--color-lb-core);
  --color-info-bg:    var(--color-lb-ice);

  /* Acento secundario — datos y visualización, nunca acciones */
  --color-np-teal:    #00778F;
  --color-np-teal-bg: #E0F1F4;

  /* ── 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(207, 230, 236, 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, el azul NetPay lee como neón limpio — 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(17, 110, 240, 0.16);

    --text-primary:    var(--color-stone);
    --text-secondary:  rgba(227, 230, 235, 0.64);
    --text-muted:      rgba(124, 135, 152, 0.78);
    --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(17, 110, 240, 0.16);

  --text-primary:    var(--color-stone);
  --text-secondary:  rgba(227, 230, 235, 0.64);
  --text-muted:      rgba(124, 135, 152, 0.78);
  --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);
}