/* ════════════════════════════════════════════════════════════
   eInventiva · TOKENS BASE
   Capa ADITIVA — extiende los tokens que ya viven en index.css
   (--bg-*, --text-*, --accent, --gradient-*, --shadow-*).
   Esto agrega lo que falta: tipografía, espaciado, radios,
   semánticos, motion, breakpoints.
   ════════════════════════════════════════════════════════════ */

:root {
  /* ───────── Tipografía ─────────
     'Inter Variable' en producción (self-hosted).
     Fallback con system-ui para que nunca falle. */
  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo,
               'Cascadia Mono', monospace;

  /* Escala — todas las medidas en px, mínimo 12px en UI */
  --fs-display:  56px;  --lh-display:  1.04;  --fw-display:  600;
  --fs-h1:       40px;  --lh-h1:       1.08;  --fw-h1:       600;
  --fs-h2:       30px;  --lh-h2:       1.18;  --fw-h2:       600;
  --fs-h3:       22px;  --lh-h3:       1.25;  --fw-h3:       600;
  --fs-body:     15px;  --lh-body:     1.55;  --fw-body:     400;
  --fs-body-sm:  13px;  --lh-body-sm:  1.50;  --fw-body-sm:  400;
  --fs-caption:  12px;  --lh-caption:  1.40;  --fw-caption:  500;

  --tracking-tight:   -0.02em;
  --tracking-display: -0.025em;
  --tracking-normal:   0;
  --tracking-eyebrow:  0.12em;

  /* ───────── Espaciado · escala 4 ───────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ───────── Radios ───────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ───────── Motion ───────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --dur-reveal: 800ms;

  /* ───────── Breakpoints (referencia, no se inyectan en CSS) ─────────
     Mismos quiebres que Tailwind. */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ───────── Contenedor ───────── */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);

  /* ───────── Z-index ───────── */
  --z-dropdown: 30;
  --z-sticky:   40;
  --z-modal:    60;
  --z-toast:    70;

  /* ───────── Semánticos · COMUNES a todos los temas ─────────
     Cada tema puede sobreescribirlos si necesita ajustar el contraste. */
  --success:        #10B981;
  --success-bg:     rgba(16,185,129,0.10);
  --success-border: rgba(16,185,129,0.32);

  --warning:        #F59E0B;
  --warning-bg:     rgba(245,158,11,0.10);
  --warning-border: rgba(245,158,11,0.32);

  --error:          #EF4444;
  --error-bg:       rgba(239,68,68,0.10);
  --error-border:   rgba(239,68,68,0.32);

  --info:           #3B82F6;
  --info-bg:        rgba(59,130,246,0.10);
  --info-border:    rgba(59,130,246,0.32);
}

/* En light theme los semánticos viven mejor con bg más opaco */
[data-theme="light"] {
  --success-bg:     rgba(16,185,129,0.08);
  --warning-bg:     rgba(245,158,11,0.10);
  --error-bg:       rgba(239,68,68,0.08);
  --info-bg:        rgba(59,130,246,0.08);
}

/* ════════════════════════════════════════════════════════════
   BASE STYLES (sobre el body global)
   ════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-optical-sizing: auto;
}

/* ────────── Compatibilidad con Tailwind 4 (opcional) ──────────
   Pegar en tu CSS de entrada si quieres exponerlos como utilidades:

   @theme inline {
     --color-bg:        var(--bg-primary);
     --color-bg-2:      var(--bg-secondary);
     --color-card:      var(--bg-card);
     --color-border:    var(--border);
     --color-text:      var(--text-primary);
     --color-text-2:    var(--text-secondary);
     --color-text-mut:  var(--text-muted);
     --color-accent:    var(--accent);
     --color-accent-l:  var(--accent-light);
     --color-accent-d:  var(--accent-dark);
     --color-success:   var(--success);
     --color-warning:   var(--warning);
     --color-error:     var(--error);
     --color-info:      var(--info);

     --font-sans: var(--font-sans);
     --font-mono: var(--font-mono);

     --radius-sm: var(--radius-sm);
     --radius-md: var(--radius-md);
     --radius-lg: var(--radius-lg);
     --radius-xl: var(--radius-xl);
   }
   ────────────────────────────────────────────────────────── */