/* ==========================================================================
   variables.css — Design tokens for Kombi Garage
   Dual identity: Kombi Garage (mechanical) × Scandrive Elite (electronics)
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --c-black: #0a0b0d;
  --c-black-soft: #0f1113;
  --c-graphite-900: #17181b;
  --c-graphite-800: #1e2023;
  --c-graphite-700: #2a2c30;
  --c-graphite-600: #3a3d42;
  --c-line: #34363a;
  --c-white: #f5f5f3;
  --c-white-dim: #c9cacb;
  --c-white-mute: #8d9094;

  /* ---- Color: signal (gold = mechanical precision) ---- */
  --c-gold: #e3a614;
  --c-gold-bright: #f4c430;
  --c-gold-dark: #a9790a;
  --c-gold-rgb: 227, 166, 20;

  /* ---- Color: scan (cyan = electronic diagnostics, Scandrive Elite) ---- */
  --c-scan: #35d0c4;
  --c-scan-rgb: 53, 208, 196;

  /* ---- Color: semantic ---- */
  --c-bg: var(--c-black);
  --c-bg-alt: var(--c-graphite-900);
  --c-surface: var(--c-graphite-800);
  --c-surface-raised: var(--c-graphite-700);
  --c-text: var(--c-white);
  --c-text-dim: var(--c-white-dim);
  --c-text-mute: var(--c-white-mute);
  --c-accent: var(--c-gold);
  --c-whatsapp: #25d366;
  --c-whatsapp-dark: #1da851;

  /* ---- Typography ---- */
  --f-display: "Kombi Condensed Fallback", "Oswald", "Arial Narrow", Impact, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
  --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.25rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --ls-tight: -0.02em;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;
  --ls-widest: 0.22em;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 8px 30px rgba(var(--c-gold-rgb), 0.25);

  /* ---- Glass ---- */
  --glass-bg: rgba(23, 24, 27, 0.72);
  --glass-border: rgba(245, 245, 243, 0.08);
  --glass-blur: 14px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-whatsapp: 90;
  --z-lightbox: 200;
  --z-toast: 300;
}

/* Reduced motion preference propagated as a token consumers can check via JS,
   and used directly to gate CSS animation durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}