/* ═══════════════════════════════════════════════════════════════
 * design-tokens.css — Sistema de diseño unificado · Structura Pro
 * v1.0 · 2026-05-23
 *
 * Tokens centralizados: colores, spacing, typography, shadows, motion.
 * Reemplaza valores hardcodeados (e.g. #f0a500, padding:14px) por
 * referencias a CSS variables.
 *
 * Uso:  color: var(--color-accent);  padding: var(--space-md);
 *
 * Cargar ANTES que cualquier otro CSS:
 *   <link rel="stylesheet" href="/design-tokens.css?v=20260524-0040">
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --brand-gold:        #f0a500;
  --brand-gold-dark:   #cc8800;
  --brand-gold-light:  #ffc547;
  --brand-orange:      #ff6b35;
  --brand-navy:        #0d1117;
  --brand-navy-soft:   #161b22;

  /* ─── SEMANTIC COLORS ──────────────────────────────────── */
  --color-success:     #3fb950;
  --color-success-bg:  rgba(63,185,80,.10);
  --color-warning:     #f0a500;
  --color-warning-bg:  rgba(240,165,0,.10);
  --color-danger:      #f85149;
  --color-danger-bg:   rgba(248,81,73,.10);
  --color-info:        #58a6ff;
  --color-info-bg:     rgba(88,166,255,.10);
  --color-purple:      #bc8cff;
  --color-purple-bg:   rgba(188,140,255,.10);

  /* ─── DARK THEME (default) ─────────────────────────────── */
  --bg:        #0d1117;
  --bg2:       #0a0d12;
  --surface:   #161b22;
  --surface2:  #21262d;
  --surface3:  #30363d;
  --border:    #21262d;
  --border2:   #30363d;
  --text:      #c9d1d9;
  --text2:     #8b949e;
  --text3:     #6e7681;
  --accent:    var(--brand-gold);

  /* ─── SPACING (8pt grid) ───────────────────────────────── */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ─── TYPOGRAPHY · 2 FUENTES CANÓNICAS (2026-06-22 lightui) ────────────
     1) --font-sans / --font-display → 'IBM Plex Sans' (UI, títulos, labels;
        titulares con peso 600/700). 'Syne' eliminada — era la 3.ª familia.
     2) --font-mono → 'JetBrains Mono' (números técnicos, refs, montos)
     'Inter', 'Lato', 'Fira Code' ya estaban fuera. */
  --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace;
  /* 2026-06-22 lightui · 'Syne' eliminada (tercera familia). --font-display ahora
     apunta a la misma pila IBM Plex Sans; usar peso 600/700 para titulares. */
  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xxs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base: 14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;

  --leading-tight:   1.25;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── RADIUS ───────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* ─── SHADOWS (graduales) ──────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.08);
  --shadow-sm:  0 2px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 8px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 8px 16px rgba(0,0,0,.16), 0 4px 8px rgba(0,0,0,.08);
  --shadow-xl:  0 16px 32px rgba(0,0,0,.20), 0 8px 16px rgba(0,0,0,.10);
  --shadow-2xl: 0 24px 48px rgba(0,0,0,.28), 0 12px 24px rgba(0,0,0,.14);

  --shadow-accent: 0 4px 16px rgba(240,165,0,.30);
  --shadow-focus:  0 0 0 3px rgba(240,165,0,.35);

  /* ─── MOTION ───────────────────────────────────────────── */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-INDEX scale (predecible) ───────────────────────── */
  --z-base:        1;
  --z-sticky:      100;
  --z-dropdown:    1000;
  --z-overlay:     5000;
  --z-modal:       9000;
  --z-toast:       9500;
  --z-tooltip:     9800;

  /* ─── LAYOUT ───────────────────────────────────────────── */
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --container-max: 1240px;
}

/* ─── LIGHT THEME (override) · 2026-06-22 lightui · estilo ERP claro ──
   Mockup aprobado (Procore/Linear): fondo gris muy claro neutro, tarjetas
   blancas puras con borde 1px sutil, tiles KPI gris claro sin borde,
   sombras casi planas. Paleta naranja de marca intacta. */
[data-theme="light"] {
  --bg:       #f6f7f9;   /* página gris muy claro neutro */
  --bg2:      #eef0f3;
  --surface:  #ffffff;   /* tarjetas blancas puras */
  --surface2: #f3f4f6;   /* tiles KPI / filas de capítulo */
  --surface3: #e9ebef;
  --border:   #e6e8eb;   /* borde 1px muy sutil */
  --border2:  #d8dbe0;
  --text:     #111827;   /* casi negro */
  --text2:    #4b5563;
  --text3:    #6b7280;

  /* Sombras planas (casi imperceptibles) — el ERP usa bordes, no sombras */
  --shadow-xs:  0 1px 1px rgba(17,24,39,.03);
  --shadow-sm:  0 1px 2px rgba(17,24,39,.04);
  --shadow-md:  0 1px 3px rgba(17,24,39,.05);
  --shadow-lg:  0 2px 6px rgba(17,24,39,.06);
  --shadow-xl:  0 4px 12px rgba(17,24,39,.08);
  --shadow-2xl: 0 8px 20px rgba(17,24,39,.10);
  --shadow-accent: 0 2px 8px rgba(240,165,0,.18);
}

/* ─── RESET + BASE STYLES ────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--leading-normal);
  color:       var(--text);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── FOCUS VISIBLE (accesibilidad) ──────────────────────── */
:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ─── SELECTION COLOR ────────────────────────────────────── */
::selection { background: var(--brand-gold); color: #fff; }

/* ─── SCROLLBARS sutiles ─────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: var(--radius-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }