/* ============================================================
   Whiteblock Design System — Layer 2: SEMANTIC
   Aliases con propósito. Cargados DESPUÉS de primitives.
   Esta es la capa que consume la UI: --surface, --text, --accent.
   Cambiar tema = sobrescribir esta capa.
   ============================================================ */

:root, [data-theme="dark"] {
  /* ── Surfaces ──
     Rediseño 2026-06: neutros CÁLIDOS (familia de las landings de captación (#0c0b11 / papel #f0eee9)) en vez de los grises fríos genéricos de admin. Es el mismo
     contraste, pero la app pasa a ser "de la casa". */
  --bg:        #0c0b11;
  --surface:   #131114;
  --surface2:  #19171a;
  --surface3:  #211f24;
  --border:    #26242a;
  --border2:   #322f37;

  /* ── Text — crema templado, no blanco azulado ── */
  --text:   #f0efeb;
  --text2:  #c9c7c3;
  --muted:  #9f9da0;
  --dim:    #55525a;
  --white:  #f7f6f3;

  /* ── Accent ── */
  --accent:        var(--wb-blue-500);
  --accent-h:      var(--wb-blue-600);
  --accent-bg:     rgba(23,0,255,.10);
  --accent-border: rgba(23,0,255,.30);

  /* ── Status ── */
  --green:    var(--wb-green-400);
  --green-bg: rgba(34,197,94,.10);
  --red:      var(--wb-red-400);
  --red-bg:   rgba(239,68,68,.10);
  --yellow:   var(--wb-yellow-500);
  --yellow-bg:rgba(234,179,8,.10);
  --purple:   #a855f7;
  --purple-bg:rgba(168,85,247,.10);
  --cyan:     #06b6d4;
  --blue:     var(--wb-blue-500);
  --accent2:  #3838FF;
  /* --orange no existía pese a ~29 usos hardcoded de #f59e0b y referencias
     a var(--orange) en app (que resolvían a nada). */
  --orange:    #f59e0b;
  --orange-bg: rgba(245,158,11,.10);
  --warning:   var(--orange);
  /* Alias defensivo: hay referencias a var(--fg) sin fallback (calendario). */
  --fg: var(--text);

  /* ── Firma de marca: tri-franja RGB del logo (rojo·verde·azul) ──
     La introdujo la sección correos; el rediseño 2026-06 la extiende a
     chrome, títulos de sección y componentes signature. */
  --wb-stripe: linear-gradient(90deg, #FE0100 0 33.4%, #00FF00 33.4% 66.7%, #1700FF 66.7% 100%);

  /* ── Effects ── */
  --shadow:    var(--wb-shadow-md);
  --shadow-lg: var(--wb-shadow-lg);
  --transition: var(--wb-transition);

  /* ── Glassmorphism (parcial — solo elementos flotantes: panels, dropdowns, modales, drawer) ── */
  --glass-bg:        rgba(22, 22, 20, .80);
  --glass-bg-strong: rgba(22, 22, 20, .93);
  --glass-border:    rgba(230, 230, 221, .08);
  --glass-blur:      blur(20px) saturate(160%);
  --glass-shadow:    0 16px 48px rgba(8, 8, 4, .55);

  /* ── Surface variants y modal overlay ── */
  --surface-hover:   rgba(255, 255, 255, .015);
  --modal-overlay:   rgba(0, 0, 0, .60);

  /* ── Radius (legacy aliases para no romper código existente) ── */
  --radius:    var(--wb-radius-lg);   /* 8px */
  --radius-lg: var(--wb-radius-xl);   /* 12px */
}

[data-theme="light"] {
  /* Rediseño 2026-06: el tema claro ES el look de las landings de captación —
     papel #f0eee9, tinta #131114. */
  --bg:        #f0eee9;
  --surface:   #f7f6f2;
  --surface2:  #e8e5df;
  --surface3:  #e1ded7;
  --border:    #d6d3cb;
  --border2:   #c2bfb7;

  --text:   #131114;
  --text2:  #33313a;
  --muted:  #55525a;
  --dim:    #9f9da0;
  --white:  #000000;

  /* Status con contraste para fondo claro. Antes vivían SOLO dentro de
     [data-theme="light"][data-accent="red"], así que light+azul y
     light+verde se quedaban con los verdes/rojos pensados para fondo
     oscuro (contraste pobre). */
  --green:    #009944;
  --red:      #cc1111;
  --yellow:   #bb8800;
  --cyan:     #0099aa;
  --purple:   #8833dd;
  --purple-bg:rgba(136,51,221,.06);
  --orange:   #c97a00;
  --orange-bg:rgba(201,122,0,.08);
  --shadow:   0 4px 24px rgba(8, 4, 32, .12);

  --accent-bg:     rgba(23,0,255,.08);
  --accent-border: rgba(23,0,255,.22);

  /* Glass tokens en tema claro — antes solo existían en oscuro, lo que dejaba
     modales con frame oscuro sobre inputs claros (mismatch evidente). */
  --glass-bg:        rgba(255, 255, 255, .82);
  --glass-bg-strong: rgba(255, 255, 255, .96);
  --glass-border:    rgba(0, 0, 0, .08);
  --glass-shadow:    0 16px 48px rgba(8, 4, 32, .12);
  --surface-hover:   rgba(0, 0, 0, .03);
  --modal-overlay:   rgba(255, 255, 255, .45);
}

/* ── Accent variants ─────────────────────────────────────────────────
   El usuario elige accent además del modo oscuro/claro. La regla por
   defecto (ya arriba) es azul Whiteblock. Aquí sobreescribimos solo los
   tokens de accent para verde y rojo. Surfaces/text se quedan como están.
   ──────────────────────────────────────────────────────────────────── */
[data-accent="green"] {
  --accent:        #0bb35e;
  --accent-h:      #0c9d52;
  --accent-bg:     rgba(11,179,94,.10);
  --accent-border: rgba(11,179,94,.30);
  --accent2:       #2fd47e;
}
[data-theme="light"][data-accent="green"] {
  --accent-bg:     rgba(11,179,94,.08);
  --accent-border: rgba(11,179,94,.22);
}

[data-accent="red"] {
  --accent:        #dc4337;
  --accent-h:      #c43a30;
  --accent-bg:     rgba(220,67,55,.10);
  --accent-border: rgba(220,67,55,.30);
  --accent2:       #ff6b5e;
}
[data-theme="light"][data-accent="red"] {
  /* Solo lo específico del accent rojo en claro: el resto de tokens light
     (status, glass, shadow, overlay) vive arriba en [data-theme="light"]. */
  --accent-bg:     rgba(220,67,55,.08);
  --accent-border: rgba(220,67,55,.22);
}