/* tokens.css — Design tokens · "Dusk Dispatch" (dark)
 *
 * Identidad unificada con la Landing y el Live Agent: asfalto al anochecer,
 * ámbar de lámpara de autopista como acento, verde de cartel-guía RESERVADO
 * para la plata, blanco reflectante para el texto.
 *
 * Los NOMBRES de token se conservan: el CSS de componentes hereda el nuevo
 * lenguaje sin tocarse. Las superficies pasan de claro→oscuro, los overlays de
 * negro-sobre-claro → blanco-sobre-oscuro, y el "ink" (botón primario) pasa de
 * negro → ámbar (con texto oscuro, ver --color-on-ink).
 */
:root {
  /* ── Tipografía ──────────────────────────────────────────── */
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ── Color · texto / neutros (claros sobre oscuro) ───────── */
  --color-text:         #EBF1F9;
  --color-text-muted:   #97A4BC;
  --color-text-subtle:  #6C7A96;
  /* slate-600..800 eran grises CLAROS (bordes/hover en tema claro); ahora son
     trazos OSCUROS ascendentes (600 = más visible, 800 = más sutil). */
  --color-slate-600:    #3A4661;
  --color-slate-700:    #2C3852;
  --color-slate-800:    #212B42;

  /* ── Color · superficies (dark) ──────────────────────────── */
  --color-bg:           #0B0E16;
  --color-bg-900:       #080B12;
  --color-surface:      #12161F;
  --color-surface-800:  #171C2B;

  /* ── Color · acento = ámbar de lámpara de autopista ──────── */
  --color-accent:       #FF9D42;
  --color-accent-700:   #E07E1F;
  --color-accent-500:   #FFB055;
  --color-accent-400:   #FFC078;
  --color-accent-rgb:   255, 157, 66;

  /* ── Color · "ink" = botón primario (ahora ÁMBAR) ────────── */
  --color-ink:          #FF9D42;
  --color-ink-700:      #FFB055;
  --color-ink-rgb:      255, 157, 66;
  /* Texto sobre botones ink/ámbar: oscuro para contraste AA. */
  --color-on-ink:       #1A1206;

  /* ── Color · dinero / positivo = verde cartel-guía ───────── */
  --color-money:        #21C08A;
  --color-money-400:    #34D3A6;
  --color-money-700:    #17A576;
  --color-money-rgb:    33, 192, 138;

  /* ── Color · semántico ───────────────────────────────────── */
  --color-success:      #21C08A;
  --color-success-600:  #17A576;
  --color-success-300:  #34D3A6;
  --color-danger:       #F0674E;
  --color-danger-300:   #F58E7A;
  --color-warning:      #FFB055;
  --color-warning-400:  #FFC078;
  --color-warning-700:  #E07E1F;

  /* ── Color · marca / tintes sutiles (antes verde claro) ──── */
  --color-indigo-400:   #1A2130;
  --color-indigo-700:   #212B42;
  --color-steel:        #EBF1F9;

  /* ── Spacing (ritmo de 4px) ──────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Blur ────────────────────────────────────────────────── */
  --blur-sm:   6px;
  --blur-lg:   18px;

  /* ── Overlays (blanco sutil sobre oscuro: bordes/divisores) ── */
  --overlay-faint:   rgba(255, 255, 255, 0.04);
  --overlay-subtle:  rgba(255, 255, 255, 0.06);
  --overlay-soft:    rgba(255, 255, 255, 0.09);
  --overlay-medium:  rgba(255, 255, 255, 0.14);
  --overlay-strong:  rgba(255, 255, 255, 0.20);

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-xs:   5px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ── Elevación — sombras profundas sobre asfalto ─────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:   0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 16px 34px rgba(0, 0, 0, 0.50);
  --shadow-xl:   0 30px 60px rgba(0, 0, 0, 0.60);
  --ring-accent: 0 0 0 3px rgba(var(--color-accent-rgb), 0.28);
  --glow-accent: 0 0 18px rgba(var(--color-accent-rgb), 0.22);
  --glow-money:  0 0 16px rgba(var(--color-money-rgb), 0.18);

  /* ── Cristal esmerilado (topbar) ─────────────────────────── */
  --glass-bg:      rgba(18, 22, 31, 0.82);

  /* ── Firma · línea de carril (marcadores de ruta) ────────── */
  --lane-color:    rgba(255, 255, 255, 0.12);
  --lane-active:   var(--color-accent);
  --lane-dash:     9px;
  --lane-gap:      8px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.14s;
  --dur:         0.22s;
  --dur-slow:    0.4s;

  /* Controles nativos (scrollbars, selects) en oscuro por defecto */
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════
   TEMA CLARO · "Day Dispatch"
   Contraparte diurna de Dusk. Mismos NOMBRES de token → todo el
   CSS de componentes se re-tematiza solo al poner data-theme="light"
   en <html>. Superficies claras, overlays negro-sobre-claro, ámbar
   y verde afinados más profundos para contraste sobre blanco.
   El botón primario "ink" sigue ámbar con texto oscuro (on-ink).
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  /* texto / neutros — oscuros sobre claro */
  --color-text:         #18212F;
  --color-text-muted:   #55617A;
  --color-text-subtle:  #8792A7;
  /* strokes: ahora bordes CLAROS (600 = más visible, 800 = más sutil) */
  --color-slate-600:    #C7CFDC;
  --color-slate-700:    #DCE2EC;
  --color-slate-800:    #E9EDF4;

  /* superficies (light) */
  --color-bg:           #F1F3F8;
  --color-bg-900:       #E8EBF2;
  --color-surface:      #FFFFFF;
  --color-surface-800:  #EEF1F6;

  /* acento = ámbar (más profundo para leer sobre blanco) */
  --color-accent:       #E58A1E;
  --color-accent-700:   #B45309;
  --color-accent-500:   #F0902E;
  --color-accent-400:   #F7A94A;
  --color-accent-rgb:   229, 138, 30;

  /* ink = botón primario (ámbar; texto oscuro heredado de :root) */
  --color-ink:          #E58A1E;
  --color-ink-700:      #C96A0C;
  --color-ink-rgb:      229, 138, 30;

  /* dinero / positivo = verde (más profundo para blanco) */
  --color-money:        #0E9A66;
  --color-money-400:    #12B37A;
  --color-money-700:    #0A7A50;
  --color-money-rgb:    14, 154, 102;

  /* semántico */
  --color-success:      #0E9A66;
  --color-success-600:  #0A7A50;
  --color-success-300:  #12B37A;
  --color-danger:       #DC2626;
  --color-danger-300:   #E5484D;
  --color-warning:      #D97316;
  --color-warning-400:  #F0902E;
  --color-warning-700:  #B45309;

  /* tintes de marca sutiles (claros) */
  --color-indigo-400:   #E9EDF6;
  --color-indigo-700:   #DEE4F1;
  --color-steel:        #2C3E50;

  /* overlays: negro sutil sobre claro (bordes/divisores) */
  --overlay-faint:   rgba(15, 23, 42, 0.03);
  --overlay-subtle:  rgba(15, 23, 42, 0.05);
  --overlay-soft:    rgba(15, 23, 42, 0.08);
  --overlay-medium:  rgba(15, 23, 42, 0.12);
  --overlay-strong:  rgba(15, 23, 42, 0.18);

  /* elevación — sombras suaves diurnas */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:   0 6px 16px rgba(15, 23, 42, 0.10);
  --shadow-lg:   0 16px 34px rgba(15, 23, 42, 0.14);
  --shadow-xl:   0 30px 60px rgba(15, 23, 42, 0.18);

  /* cristal esmerilado (topbar) — claro traslúcido */
  --glass-bg:    rgba(255, 255, 255, 0.82);

  /* firma · línea de carril */
  --lane-color:  rgba(15, 23, 42, 0.12);
}

/* Transición suave al cambiar de tema — sólo superficies grandes para
   que el swap no se sienta abrupto sin encarecer cada micro-interacción. */
html, body,
.saas-layout-wrapper, .saas-sidebar, .saas-topbar,
.saas-main-container, .saas-content-area {
  transition: background-color var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html, body, .saas-layout-wrapper, .saas-sidebar, .saas-topbar,
  .saas-main-container, .saas-content-area { transition: none; }
}