/* frontend/styles/tokens.css
   Tokens del dashboard Kaizen App.
   Colores + sombras son theme-aware (claro default + oscuro vía
   [data-theme="dark"]); el resto (tipografía, spacing, layout, motion,
   radii, z-index) es compartido. */

/* ===== Colores + sombras — Tema claro (default, dirección B) ===== */
:root,
:root[data-theme="light"] {
  --color-rojo-kaizen: #E11D2A;
  --color-rojo-profundo: #A30A1B;
  --color-rojo-suave: #FCEBEC;
  --color-tinta: #0F172A;
  --color-papel: #FFFFFF;
  --color-surface: #F4F6FA;
  --color-surface-soft: #FBFCFE;
  --color-gris-nodo: #CBD5E1;
  --color-gris-label: #475569;
  --color-muted: #64748B;
  --color-gris-linea: #E8ECF2;
  --color-line-strong: #CBD5E1;
  --color-success: #15924B;
  --color-success-soft: #E9F7EF;
  --color-success-deep: #0E6B37;
  --color-warn: #B45309;
  --color-warn-soft: #FEF3C7;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 28px -16px rgba(15, 23, 42, 0.20), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px -20px rgba(15, 23, 42, 0.26);
  --shadow-xl: 0 26px 60px -24px rgba(15, 23, 42, 0.30);
  --shadow-ring: 0 0 0 3px rgba(225, 29, 42, 0.18);
  --shadow-ring-soft: 0 0 0 3px rgba(225, 29, 42, 0.10);
}

/* ===== Colores + sombras — Tema oscuro ===== */
:root[data-theme="dark"] {
  --color-rojo-kaizen: #FF4D58;
  --color-rojo-profundo: #FF7A82;
  --color-rojo-suave: #2A1518;
  --color-tinta: #EAF0F8;
  --color-papel: #171C24;
  --color-surface: #0E1116;
  --color-surface-soft: #1B212B;
  --color-gris-nodo: #3A4452;
  --color-gris-label: #A6B2C2;
  --color-muted: #8C97A8;
  --color-gris-linea: #262E3A;
  --color-line-strong: #39434F;
  --color-success: #34D399;
  --color-success-soft: #10241B;
  --color-success-deep: #86EFAC;
  --color-warn: #FBBF24;
  --color-warn-soft: #2A2009;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 30px -16px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 26px 60px -24px rgba(0, 0, 0, 0.75);
  --shadow-ring: 0 0 0 3px rgba(255, 77, 88, 0.30);
  --shadow-ring-soft: 0 0 0 3px rgba(255, 77, 88, 0.18);
}

/* ===== Tokens compartidos (no cambian con el tema) ===== */
:root {
  color-scheme: light dark;

  /* ---------- Tipografía ---------- */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Scale completa estilo web-v3 (fluida con clamp). */
  --text-eyebrow: 0.72rem;
  --text-xs: 0.78rem;
  --text-sm: 0.92rem;
  --text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  --text-h2: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  --text-h1: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --text-display: clamp(2.6rem, 1.4rem + 4vw, 4.5rem);

  /* ---------- Spacing ---------- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-block: clamp(1.25rem, 1rem + 1vw, 2.25rem);

  /* ---------- Layout ---------- */
  --topbar-height: 84px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 56px;
  --chat-drawer-width: 380px;
  --content-max: 1200px;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 520ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Z-index scale ---------- */
  --z-sidebar: 10;
  --z-topbar: 20;
  --z-drawer: 50;
  --z-modal: 100;
  --z-toast: 200;
}