/* ================================================================
   VAN-CAR Design Tokens
   Single source of truth for the brand palette.
   Import via <link rel="stylesheet" href="./variables.css"> in each page.
   NOTE: index.html doesn't load this file directly — it loads a generated
   bundle, site-critical.min.css (scripts/merge-critical-css.mjs). If you
   change tokens here, re-run that script for the change to reach the
   homepage.
   ================================================================ */

:root {
  /* Brand reds */
  --vc-red:       #ff1230;   /* primary CTA, badges, accents */
  --vc-red-dark:  #b90018;   /* gradient endpoint, pressed states */

  /* Gold */
  --vc-gold:      #ffb000;   /* stars, premium accents */
  --vc-gold-warm: #c8a96e;   /* muted gold, card borders */
  --vc-gold-dark: #e8890c;   /* hover state for gold elements */

  /* Blue (tracking / SeaRates section) */
  --vc-blue:      #3970d3;

  /* Neutrals */
  --vc-bg:        #040404;   /* page background */
  --vc-surface:   #0d0d0f;   /* cards, elevated surfaces */
  --vc-text:      #f8f8f8;   /* body text */
  --vc-muted:     #a9a9a9;   /* secondary text, captions */
  --vc-border:    rgba(255, 255, 255, 0.08);  /* subtle dividers */

  /* Typography
     Standard (2026-07-12): 'Black Ops One' na hero + główne tytuły sekcji;
     'Barlow Condensed' na drobne nagłówki/nav/przyciski/etykiety/ceny; 'Inter' na treść.
     WAŻNE: --vc-font-display zostaje Barlow Condensed — dziesiątki komponentów
     (vc-components.css) używają var(--vc-font-display); flip zrobiłby je ciężkimi. */
  --vc-font-hero:     'Black Ops One', system-ui, sans-serif;     /* h1 hero */
  --vc-font-title:    'Black Ops One', system-ui, sans-serif;     /* główne tytuły sekcji (h2/h3) */
  --vc-font-display:  'Barlow Condensed', system-ui, sans-serif;  /* nav, przyciski, etykiety, nazwy/ceny, eyebrow */
  --vc-font-body:     'Inter', system-ui, sans-serif;             /* body, UI text */
  --vc-font-stencil:  'Stardos Stencil', system-ui, sans-serif;  /* distressed/grunge CTA (nieużywany) */

  /* Type scale (8 steps) */
  --vc-text-xs:   0.7rem;
  --vc-text-sm:   0.8rem;
  --vc-text-base: 1rem;
  --vc-text-md:   1.1rem;
  --vc-text-lg:   1.25rem;
  --vc-text-xl:   1.5rem;
  --vc-text-2xl:  2rem;
  --vc-text-3xl:  3rem;

  /* Border radius scale */
  --vc-r-xs:   4px;    /* tags, tiny chips */
  --vc-r-sm:   6px;    /* small buttons, badges */
  --vc-r-md:   8px;    /* inputs, most buttons */
  --vc-r-lg:   12px;   /* cards, panels */
  --vc-r-xl:   16px;   /* modals, large cards */
  --vc-r-2xl:  20px;   /* hero cards, featured */
  --vc-r-pill: 999px;  /* pills, fully-rounded */

  /* Spacing scale (8-point grid) */
  --vc-space-1:  4px;
  --vc-space-2:  8px;
  --vc-space-3:  12px;
  --vc-space-4:  16px;
  --vc-space-5:  24px;
  --vc-space-6:  32px;
  --vc-space-7:  48px;
  --vc-space-8:  64px;

  /* Transition speeds */
  --vc-fast:    0.2s ease;
  --vc-normal:  0.3s ease;
  --vc-slow:    0.45s ease;

  /* Easing tokens — automotive feel */
  --vc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* smooth decel, premium automotive */
  --vc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* neutral, symetryczny */
  --vc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-hover only, nie hero */

  /* Duration tokens */
  --vc-dur-fast:   0.28s;
  --vc-dur-normal: 0.55s;
  --vc-dur-slow:   0.9s;

  /* Z-index layers */
  --vc-z-base:    1;
  --vc-z-overlay: 50;
  --vc-z-nav:     100;
  --vc-z-modal:   200;
  --vc-z-toast:   300;

  /* Container widths */
  --vc-container:    1280px;  /* alias for lg */
  --vc-container-sm:  900px;  /* narrow content columns */
  --vc-container-md: 1100px;  /* mid-width sections */
  --vc-container-lg: 1280px;  /* full-width sections */
}

/* ── Base heading typography
   Wymusza spójność na gołych tagach h1-h6.
   Inline styles i klasy (wyższa specyficzność) nadal wygrywają.
   ─────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--vc-font-hero);      /* Black Ops One */
}
h2, h3 {
  font-family: var(--vc-font-title);     /* Black Ops One — główne tytuły sekcji */
}
h4, h5, h6 {
  font-family: var(--vc-font-display);   /* Barlow Condensed — drobne nagłówki */
}