/* =========================================================================
   VINEL — Design tokens
   Engineering / instrument-panel aesthetic. Warm paper base, dark warm ink,
   Vinel brand red used with strict restraint as the charged accent.
   ========================================================================= */
:root {
  /* --- Palette --- */
  --paper:    #F7F5EF;   /* warm off-white base */
  --paper-2:  #EFEDE5;   /* slightly deeper paper for inset surfaces */
  --surface:  #FFFFFF;   /* cards */
  --ink:      #17170F;   /* warm near-black: text + structure */
  --ink-2:    #2A2A20;   /* secondary ink */
  --char:     #1A1A14;   /* dark inverted sections / footer */
  --char-2:   #232319;   /* dark surface above --char */
  --volt:     #DC2333;   /* Vinel brand red — accent only */
  --volt-2:   #B91C2A;   /* darker red for hover / active states */
  --steel:    #6C6C60;   /* muted secondary text / captions */
  --steel-2:  #9A9A8F;
  --line:     #E4E1D7;   /* hairline dividers */
  --line-2:   #D6D2C4;
  --line-dark: rgba(255,255,255,0.10);
  --danger:   #C5402A;
  --ok:       #2B7A4B;

  /* --- Typography --- */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Modular type scale (clamp-fluid) */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-24: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  --t-32: clamp(1.65rem, 1.3rem + 1.4vw, 2.25rem);
  --t-44: clamp(2.05rem, 1.6rem + 2.2vw, 3rem);
  --t-64: clamp(2.6rem, 2rem + 3.2vw, 4.5rem);
  --t-88: clamp(3.4rem, 2.4rem + 5.5vw, 7.5rem);
  --t-128: clamp(4.5rem, 3rem + 9vw, 11rem);

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-base:  1.5;
  --lh-loose: 1.62;

  --ls-mono: 0.08em;
  --ls-mono-tight: 0.04em;
  --ls-display: -0.02em;
  --ls-display-tight: -0.035em;

  /* --- Spacing scale (8-pt + half steps) --- */
  --s-2:  2px;
  --s-4:  4px;
  --s-6:  6px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-120: 120px;
  --s-160: 160px;

  /* --- Layout --- */
  --container: 1440px;
  --gutter-x: clamp(20px, 4vw, 56px);
  --grid-cols: 12;
  --grid-gap: clamp(16px, 1.6vw, 24px);
  --header-h: 72px;
  --header-h-condensed: 56px;

  /* --- Radii --- */
  --r-0: 0px;
  --r-2: 2px;
  --r-4: 4px;
  --r-8: 8px;
  --r-12: 12px;
  --r-pill: 999px;

  /* --- Shadows / depth --- */
  --shadow-1: 0 1px 0 rgba(23,23,15,0.04), 0 0 0 1px rgba(23,23,15,0.06);
  --shadow-2: 0 4px 22px -10px rgba(23,23,15,0.18), 0 0 0 1px rgba(23,23,15,0.07);
  --shadow-volt: 0 0 0 1px var(--volt), 0 14px 40px -18px rgba(220,35,51,0.50);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 0.71, 0.2);
  --ease-spike: cubic-bezier(0.16, 1.36, 0.4, 1);
  --d-fast: 160ms;
  --d-base: 320ms;
  --d-slow: 600ms;

  /* --- Z layers --- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 800;
  --z-modal: 900;
  --z-preloader: 1000;
}

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