/* ============================================================
   D-Claude — Design Tokens
   Fuente de verdad visual. Extraído de D-Claude_Caso_FichajeJPA.html
   aprobado por el usuario el 2026-04-14.
   ============================================================ */

:root[data-theme="dark"],
:root {
  /* === Paleta base (aprobada) === */
  --bg:       #1a1a2e;
  --bg2:      #16213e;
  --bg3:      #0f1c38;
  --surface:  #1e2a4a;
  --border:   #2a3a5c;

  /* === Texto === */
  --text:     #e6e8f0;
  --text2:    #a9b4cf;
  --muted:    #6f7b9c;

  /* === Acentos semánticos === */
  --accent:   #64ffda;   /* cyan — color principal */
  --purple:   #bb86fc;   /* Caso Fichaje, destacado */
  --green:    #69f0ae;   /* success, electronica */
  --yellow:   #ffd740;   /* diseño 3D */
  --red:      #ff5252;   /* errores */
  --blue:     #4fc3f7;   /* info, mobile */
  --pink:     #f48fb1;   /* web */
  --orange:   #ffb74d;   /* warning, redes */

  /* === Tipografía === */
  --serif: 'Fraunces', 'Georgia', serif;
  --sans:  'Manrope', system-ui, sans-serif;
  --mono:  'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

  /* === Rhythm === */
  --max: 1320px;
  --gutter: 32px;

  /* === Spacing scale (8pt grid) === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* === Radios === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* === Transiciones === */
  --ease: .2s;
  --ease-slow: .3s;

  /* === Z-index scale === */
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;

  /* === Aliases legacy (compatibilidad con HTMLs previos que usan --font) === */
  --font: var(--sans);
  --mono-font: var(--mono);
}

/* ============================================================
   Hook para tema claro (v2 — TODO)
   Cuando se active, rellenar bloque siguiente con paleta light
   recalibrada (ej. acento cyan oscuro para contraste sobre blanco).
   ============================================================ */
:root[data-theme="light"] {
  /* TODO v2 — no implementado todavía */
}