/* VuelaViral · Dirección C · Editorial Cálido
   Tokens globales — todos los componentes consumen solo estas vars
   v3 final — 2026-04-20
*/
:root{
  /* Color · neutrales cálidos */
  --bg: #f6f1e8;
  --paper: #fbf6ec;
  --paper-2: #f1ebdd;
  --ink: #1a1712;
  --ink-2: #4a433a;
  --mute: #8b826f;
  --line: #e4dcc9;
  --line-2: #c9bfa5;

  /* Acento terracota (identidad cálida) */
  --accent: #c85a3a;
  --accent-soft: #f3cabf;

  /* Estado · pérdida real (rojo saturado, reservado) */
  --loss: #d93a1f;
  --loss-glow: rgba(217,58,31,0.22);
  --good: #4a7a3a;
  --warn: #c89420;

  /* Tipografía */
  --font-serif: "Fraunces", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radios */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Sombras (cálidas, suaves) */
  --sh-1: 0 1px 2px rgba(26,23,18,0.04);
  --sh-2: 0 8px 24px rgba(26,23,18,0.06);
  --sh-3: 0 20px 60px rgba(26,23,18,0.12);

  /* Motion */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 64px;
}

/* Dark theme · opcional (respeta localStorage[vv-theme]) */
[data-theme="dark"]{
  --bg: #17140e;
  --paper: #1d1913;
  --paper-2: #251f17;
  --ink: #fbf6ec;
  --ink-2: #d8cfbc;
  --mute: #8b826f;
  --line: #332c22;
  --line-2: #4a4135;
  --accent: #e07a5d;
  --accent-soft: #3a1f14;
  --loss: #ff5a3d;
  --loss-glow: rgba(255,90,61,0.28);
  --good: #6a9f55;
  --warn: #e0b048;
}