/* ============================================================
   Hotrod Wien — Design Tokens (LAYER 1, source of truth). LIGHT ONLY.
   Bricks runs html (font-size: 62.5%) → 1rem = 10px.

   DROP-IN REPLACEMENT for the Cocolino reference tokens.css.
   Same structure, same SEMANTIC NAMES (--wb-*) → apply-design.php &
   apply-components.php resolve unchanged. Only the VALUES are re-skinned.

   STRUKTUR (3 Zonen):
     (a) PRIMITIVES + raw scales — mode-invariant. Literale Hex-Rampe +
         Type-/Space-/Radius-/Shadow-/Z-/Opacity-/Blur-Skalen. KEIN var() hier.
     (b) :root SEMANTIC — aliast die Primitives via var(). Komponenten/Theme-Style
         referenzieren NUR diese semantische Schicht, nie ein Primitive direkt.
     (c) HOTROD EXTRAS — additive Tokens, die nur base.css / die neuen
         wb-* Komponenten brauchen (Wedge-Clip, Asphalt-Flächen, Checker).
         Additiv = die bestehenden Applier ignorieren sie gefahrlos.

   IDENTITÄT (vs. Cocolino):
     Cocolino = coral/purple/yellow, Fredoka+Nunito, große Radien, weiche Blur-Schatten.
     Hotrod   = Orange/Ink, Oswald+Inter, RADIUS 0, HARTE Offset-Schatten, Großbuchstaben.
     Buttons: ORANGE Fläche + SCHWARZER Text (Signature) → --wb-on-primary = ink.

   DUAL-MODE: Hotrod ist 'light-only'. Die "dunklen" Sektionen (Hero, Booking,
     Reviews, CTA, Footer) sind KEIN Dark-Mode — sie sind Inverse-BÄNDER über
     --wb-inverse-bg auf einer hellen Seitenbasis. WB_DESIGN_MODE bleibt 'light-only'.
   ============================================================ */

/* ============================================================
   (a) PRIMITIVES — mode-invariant. Roh-Hex + Skalen. Kein var().
   ============================================================ */
:root {
  /* ---- Color ramp (literal hex — defined ONCE, aliased below) ----
     Hotrod CI: Orange #FF6B00 · Black #111111 · White #FFFFFF. */
  --wb-c-orange:#FF6B00;        --wb-c-orange-deep:#E65F00;
  --wb-c-orange-btn:#FF6B00;    --wb-c-orange-btn-deep:#E65F00;   /* solid fill carries BLACK text → bright orange is AA (ink on orange ~7.4:1) */
  --wb-c-orange-700:#B84400;                                      /* darkest orange — used ONLY as small text/links (AA on white ~5.0:1) */
  --wb-c-orange-text:#B84400;   /* orange darkened to AA as small text/kickers */

  /* Secondary accents — Hotrod has no purple/yellow; these alias to the
     ink/orange axis so any inherited "purple/yellow" usage stays on-brand. */
  --wb-c-ink:#111111;          --wb-c-ink-2:#555555;          --wb-c-ink-3:#7A7A7A;
  --wb-c-jet:#0B0B0C;          /* deepest ink — inverse band base & black text on orange */
  --wb-c-white:#FFFFFF;        --wb-c-paper-2:#F5F5F5;
  --wb-c-asphalt:#141416;      --wb-c-asphalt-2:#1B1B1F;       /* inverse surfaces / dark cards */
  --wb-c-line:#E2E2E2;         --wb-c-line-strong:#C9C9C9;
  --wb-c-on-dark:#F4F2EF;      --wb-c-on-dark-muted:#A8A29A;   --wb-c-on-dark-line:#2A2A2E;
  --wb-c-success:#1F8A5B;      --wb-c-danger:#C5483C;
  --wb-c-warning:#B26A00;      --wb-c-info:#2A6FDB;

  /* ---- Shadow ink (the rgb base behind every elevation) ---- */
  --wb-shadow-ink:17,17,17;    /* = --wb-c-ink as rgb triplet for rgba() composition */

  /* ---- Type scale (raw) — 1rem = 10px. Oswald display = big, tight, UPPERCASE. ---- */
  --wb-h1:clamp(3.8rem,2.2rem + 4.2vw,7rem);
  --wb-h2:clamp(3.0rem,2.0rem + 3.4vw,5.6rem);
  --wb-h3:clamp(2.0rem,1.6rem + 1.4vw,2.8rem);
  --wb-h4:1.9rem; --wb-h5:1.5rem; --wb-h6:1.3rem;
  --wb-text-base:1.7rem; --wb-text-sm:1.4rem;
  --wb-text-lg:clamp(1.8rem,1.6rem + .55vw,2.15rem);
  --wb-leading:1.62; --wb-leading-tight:.95;

  /* ---- Weight + tracking (raw) ---- */
  --wb-weight-body:400; --wb-weight-medium:500; --wb-weight-semibold:600;
  --wb-weight-bold:700; --wb-weight-black:800;
  --wb-tracking-tight:-.02em; --wb-tracking-normal:0; --wb-tracking-wide:.14em;
  --wb-tracking-kicker:.22em;   /* extra-wide label tracking (Oswald kickers) */

  /* ---- Font stacks (raw) ---- */
  --wb-font-display:"Oswald","Arial Narrow",system-ui,sans-serif;
  --wb-font-body:"Inter",system-ui,-apple-system,sans-serif;
  --wb-font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- Space scale (4px grid, raw) ---- */
  --wb-space-0:0;
  --wb-space-1:.4rem; --wb-space-2:.8rem; --wb-space-3:1.2rem; --wb-space-4:1.6rem;
  --wb-space-5:2.4rem; --wb-space-6:3.2rem; --wb-space-7:4.8rem; --wb-space-8:6.4rem;
  --wb-space-section:clamp(7rem,4.5rem + 8vw,12rem);
  --wb-gutter:clamp(2rem,1.2rem + 3vw,4.2rem);
  --wb-container:134rem; --wb-container-narrow:72rem;

  /* ---- Radius scale (raw) — Hotrod is brutalist: SHARP. ---- */
  --wb-r-sm:0; --wb-r:0; --wb-r-lg:0; --wb-r-xl:0; --wb-r-pill:999px;  /* pill stays round for dots/avatars only */

  /* ---- Z-index scale (raw) ---- */
  --wb-z-base:1; --wb-z-header:100; --wb-z-dropdown:200; --wb-z-overlay:900; --wb-z-max:9999;

  /* ---- Opacity scale (raw) ---- */
  --wb-opacity-muted:.6; --wb-opacity-disabled:.4; --wb-opacity-hover:.85;

  /* ---- Blur scale (raw) — only the sticky header glass uses it ---- */
  --wb-blur-sm:6px; --wb-blur:14px; --wb-blur-lg:24px;

  /* ---- Motion (raw) ---- */
  --wb-transition:.18s ease;
}

/* ============================================================
   (b) :root SEMANTIC — aliases the primitives via var().
   Components + Theme Style reference THESE names only.
   ============================================================ */
:root {
  /* ---- Brand vivids (fills / icons / shapes — NOT small text) ----
     Cocolino had coral/purple/yellow. Hotrod re-points them onto the
     Orange/Ink axis so inherited components stay on-brand:
       coral  → orange (the one vivid)
       purple → jet ink (dark accent / second "color")
       yellow → orange (no separate yellow in Hotrod) */
  --wb-coral:var(--wb-c-orange);        --wb-coral-deep:var(--wb-c-orange-deep);
  --wb-purple:var(--wb-c-jet);          --wb-purple-deep:var(--wb-c-ink);
  --wb-yellow:var(--wb-c-orange);
  --wb-orange:var(--wb-c-orange);       --wb-orange-deep:var(--wb-c-orange-deep);
  --wb-ink:var(--wb-c-ink);             --wb-jet:var(--wb-c-jet);

  /* ---- Surfaces ---- */
  --wb-bg:var(--wb-c-white);            --wb-surface:var(--wb-c-white);
  --wb-surface-2:var(--wb-c-paper-2);
  --wb-cream:var(--wb-c-white);         --wb-lilac:var(--wb-c-paper-2);  --wb-rose:var(--wb-c-paper-2);
  --wb-asphalt:var(--wb-c-asphalt);     --wb-asphalt-2:var(--wb-c-asphalt-2);

  /* ---- Interaction surfaces (hover / active tints over surface) ---- */
  --wb-surface-hover:color-mix(in srgb, var(--wb-c-ink) 4%, var(--wb-surface));
  --wb-surface-active:color-mix(in srgb, var(--wb-c-ink) 8%, var(--wb-surface));

  /* ---- Text / lines ---- */
  --wb-text:var(--wb-c-ink);           --wb-muted:var(--wb-c-ink-2);   --wb-subtle:var(--wb-c-ink-3);
  --wb-border:var(--wb-c-line);        --wb-border-strong:var(--wb-c-line-strong);

  /* ---- Semantic roles ----
     SIGNATURE: primary fill is BRIGHT ORANGE with BLACK text (not white). */
  --wb-primary:var(--wb-c-orange-btn);        /* solid action fills */
  --wb-primary-hover:var(--wb-c-orange-btn-deep);
  --wb-on-primary:var(--wb-c-jet);            /* BLACK text on orange buttons — AA ~7.4:1 */
  --wb-on-surface:var(--wb-c-ink);            /* default text on light surfaces */
  --wb-on-inverse:var(--wb-c-white);          /* text on the dark inverse band */
  --wb-link:var(--wb-c-orange-text);          /* orange AS TEXT (kickers/links) — AA ~5.0:1 on white */
  --wb-link-purple:var(--wb-c-orange-text);   /* no purple in Hotrod → orange-text */

  /* ---- State triad (bg tint / border / text) ---- */
  --wb-success:var(--wb-c-success);
  --wb-success-bg:color-mix(in srgb, var(--wb-c-success) 10%, var(--wb-surface));
  --wb-success-border:color-mix(in srgb, var(--wb-c-success) 40%, var(--wb-border));
  --wb-success-text:var(--wb-c-success);
  --wb-danger:var(--wb-c-danger);
  --wb-danger-bg:color-mix(in srgb, var(--wb-c-danger) 10%, var(--wb-surface));
  --wb-danger-border:color-mix(in srgb, var(--wb-c-danger) 40%, var(--wb-border));
  --wb-danger-text:var(--wb-c-danger);
  --wb-warning:var(--wb-c-warning);
  --wb-warning-bg:color-mix(in srgb, var(--wb-c-warning) 10%, var(--wb-surface));
  --wb-warning-border:color-mix(in srgb, var(--wb-c-warning) 40%, var(--wb-border));
  --wb-warning-text:var(--wb-c-warning);
  --wb-info:var(--wb-c-info);
  --wb-info-bg:color-mix(in srgb, var(--wb-c-info) 10%, var(--wb-surface));
  --wb-info-border:color-mix(in srgb, var(--wb-c-info) 40%, var(--wb-border));
  --wb-info-text:var(--wb-c-info);

  /* ---- Focus tier ---- */
  --wb-ring:rgba(255,107,0,.45);       /* orange @ 45% — focus glow */

  /* ---- Inverse (dark bands + footer, by design) + text-on-image ---- */
  --wb-inverse-bg:var(--wb-c-jet);     --wb-inverse-text:var(--wb-c-white);
  --wb-inverse-muted:var(--wb-c-on-dark-muted);
  --wb-inverse-line:var(--wb-c-on-dark-line);
  --wb-on-image:var(--wb-c-white);

  /* ---- Shadows — HARD OFFSET (no blur), Hotrod brutalist signature.
          Composed from --wb-shadow-ink (solid). ---- */
  --wb-shadow-sm:4px 4px 0 0 rgba(var(--wb-shadow-ink),1);
  --wb-shadow:8px 8px 0 0 rgba(var(--wb-shadow-ink),1);
  --wb-shadow-lg:12px 12px 0 0 rgba(var(--wb-shadow-ink),1);
  --wb-shadow-coral:8px 8px 0 0 var(--wb-c-orange);   /* orange hard shadow (name kept for applier compat) */

  /* ---- Decorative gradients (raw CSS — Bricks gradient-control is lazy-load-broken).
          Re-authored for Hotrod: orange-glow on dark + asphalt placeholders.
          NAMES kept identical so apply-components.php resolves; VALUES re-skinned. ---- */
  --wb-hero-glow:radial-gradient(58% 70% at 82% 18%, rgba(255,107,0,.20), transparent 64%);
  --wb-hero-art-card:linear-gradient(135deg, var(--wb-c-asphalt) 0%, var(--wb-c-jet) 100%);
  /* "balloon" names retained for applier compat — re-skinned to motorsport placeholder fills */
  --wb-balloon-coral:linear-gradient(135deg, var(--wb-c-orange), var(--wb-c-orange-700));
  --wb-balloon-purple:linear-gradient(135deg, var(--wb-c-asphalt), var(--wb-c-jet));
  --wb-balloon-yellow:linear-gradient(135deg, var(--wb-c-orange-700), var(--wb-c-jet));
  --wb-cta-grad:linear-gradient(135deg, var(--wb-c-orange-700) 0%, var(--wb-c-jet) 100%);
  --wb-ph-1:linear-gradient(135deg, var(--wb-c-orange), var(--wb-c-orange-700));
  --wb-ph-2:linear-gradient(135deg, var(--wb-c-asphalt), var(--wb-c-jet));
  --wb-ph-3:linear-gradient(135deg, var(--wb-c-orange-700), var(--wb-c-jet));
  --wb-ph-4:linear-gradient(135deg, #2C2C30, var(--wb-c-jet));

  /* ---- Squiggle stroke (kept for applier compat) → orange ---- */
  --wb-squiggle-stroke:var(--wb-c-orange);
}

/* ============================================================
   (c) HOTROD EXTRAS — additive only (existing appliers ignore these).
   base.css and the new wb-* components consume them.
   ============================================================ */
:root {
  /* Speed-wedge button clip size (the angled bottom-right cut). */
  --wb-wedge:clamp(8px,1.4vw,16px);
  /* Repeating speed-stripe (orange diagonal bars) — section top accents. */
  --wb-stripe:repeating-linear-gradient(115deg, var(--wb-c-orange) 0 14px, transparent 14px 26px);
  /* Checkered finish-line band (footer top). */
  --wb-checker:repeating-conic-gradient(var(--wb-c-jet) 0 25%, transparent 0 50%) 0 0/24px 24px;
  /* Asphalt grain overlay (subtle texture on dark bands). */
  --wb-grain:repeating-linear-gradient(128deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px);
  /* Hover-card hard shadow (fleet/tour cards lift). */
  --wb-shadow-card-hover:10px 10px 0 0 var(--wb-c-jet);
}