/* ==========================================================================
   VANTAR Dynamics — Design Tokens
   V-Telemetry identity: near-black surfaces, industrial mustard accent,
   unified Space Grotesk technical type, blueprint grid.
   ========================================================================== */

:root {
  /* --- Dark surfaces --- */
  --cream:        #0d0d0f;       /* page background */
  --cream-2:      #151518;       /* glass card base */
  --cream-3:      #1f1f23;       /* secondary buttons / borders */
  --paper:        #0d0d0f;

  /* --- Text & greys --- */
  --ink:          #ffffff;       /* primary text & titles */
  --ink-soft:     #a1a1a6;       /* secondary text */
  --ink-faint:    #8a8a90;       /* texto chico: sube desde #6E6E73 para cumplir contraste 4,5:1 */
  --hairline:     rgba(255, 255, 255, 0.08);
  --hairline-2:   rgba(255, 255, 255, 0.15);

  /* --- Industrial mustard accent --- */
  --yellow:       #D49A17;
  --orange:       #D49A17;        /* legacy alias (project tags) */
  --orange-warm:  #E5A93C;
  --amber:        #FFCC00;

  /* --- Legacy accent aliases mapped to brand (kept so refs stay coherent) --- */
  --purple:       #D49A17;
  --purple-deep:  #9b6c0b;
  --violet:       #D49A17;

  /* --- Functional --- */
  --good:         #2f9e6f;
  --warn:         #e8a33d;
  --bad:          #e2553b;
  --axis-x:       #ffffff;        /* chart axes */
  --axis-y:       #a1a1a6;
  --axis-z:       #D49A17;

  /* --- Glassmorphism (dark) --- */
  --glass-bg:     rgba(21, 21, 24, 0.7);
  --glass-bg-2:   rgba(21, 21, 24, 0.85);
  --glass-brd:    rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6),
                  0 2px 8px -4px rgba(0, 0, 0, 0.3);

  /* --- No complex gradients / neon: flat mustard + white --- */
  --grad-accent:  var(--yellow);
  --grad-text:    #ffffff;

  /* --- Unified technical typography (Fraunces removed) --- */
  --font-serif: "Space Grotesk", system-ui, sans-serif;
  --font-sans:  "Space Grotesk", system-ui, -apple-system,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "Space Grotesk", ui-monospace, "SF Mono", "Cascadia Code",
                "Roboto Mono", monospace;

  /* --- Spacing scale (8pt-ish, mobile-first) --- */
  --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;

  /* --- Radii --- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* --- Motion --- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  520ms;

  /* --- Layout --- */
  --maxw:      560px;          /* mobile-first column cap */
  --franja:    560px;          /* ancho de la franja con retícula (sigue a la columna) */
  --nav-h:     72px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}