/* ============================================================
   RAGING AXE — DESIGN TOKENS
   "Controlled chaos." Adrenaline you can book.
   ============================================================ */

:root {
  /* ---------- COLOR: canvas & surfaces ---------- */
  --ra-base:        #0A0B0A;   /* primary black canvas */
  --ra-surface-1:   #121413;   /* raised surface */
  --ra-surface-2:   #1A1D1B;   /* card / panel surface */
  --ra-surface-3:   #232724;   /* hover lift / input wells */

  /* ---------- COLOR: electric green (voltage) ---------- */
  --ra-green:       #22E06A;   /* core electric green */
  --ra-green-bright:#5CFF93;   /* highlight / glow peaks */
  --ra-green-deep:  #0E8A3C;   /* pressed / deep shade */
  --ra-teal:        #16C9A6;   /* gradient partner */

  /* ---------- COLOR: spark (impact only) ---------- */
  --ra-spark:       #FF4D2E;   /* sparingly — impact moments */
  --ra-spark-deep:  #C8351C;

  /* ---------- COLOR: text ---------- */
  --ra-text:        #F4F6F4;   /* primary text */
  --ra-muted:       #9AA39C;   /* secondary / muted */
  --ra-faint:       #5C645E;   /* tertiary / disabled */

  /* ---------- COLOR: lines ---------- */
  --ra-line:        rgba(244,246,244,0.08);  /* hairline on dark */
  --ra-line-strong: rgba(244,246,244,0.16);
  --ra-green-line:  rgba(34,224,106,0.30);

  /* ---------- GRADIENTS ---------- */
  --ra-grad-green:  linear-gradient(135deg, #22E06A 0%, #16C9A6 100%);
  --ra-grad-green-soft: linear-gradient(135deg, rgba(34,224,106,0.16), rgba(22,201,166,0.16));
  --ra-grad-fade:   linear-gradient(180deg, rgba(10,11,10,0) 0%, rgba(10,11,10,0.85) 70%, var(--ra-base) 100%);

  /* ---------- TYPOGRAPHY: families ---------- */
  --ra-display: "Anton", "Arial Narrow", sans-serif;     /* heavy condensed impact */
  --ra-body:    "Inter", system-ui, sans-serif;
  --ra-mono:    "JetBrains Mono", "Space Mono", ui-monospace, monospace;

  /* ---------- TYPOGRAPHY: dramatic scale (fluid) ---------- */
  --fs-mega:    clamp(4.5rem, 16vw, 13.5rem);  /* hero impact line */
  --fs-giant:   clamp(3rem, 9vw, 7rem);        /* section displays */
  --fs-xl:      clamp(2.25rem, 5vw, 4rem);     /* block titles */
  --fs-lg:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-md:      1.375rem;
  --fs-body:    1.0625rem;   /* 17px base body */
  --fs-sm:      0.9375rem;
  --fs-eyebrow: 0.8125rem;   /* mono eyebrows */
  --fs-micro:   0.6875rem;   /* tags / stamps */

  /* ---------- TYPOGRAPHY: metrics ---------- */
  --lh-display: 0.88;
  --lh-tight:   1.05;
  --lh-snug:    1.3;
  --lh-body:    1.6;
  --ls-mega:    -0.02em;
  --ls-display: -0.01em;
  --ls-eyebrow: 0.28em;
  --ls-mono:    0.16em;

  /* ---------- SPACING: 4px base scale ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ---------- LAYOUT ---------- */
  --container: 1280px;
  --gutter:    clamp(20px, 5vw, 64px);
  /* Fixed-nav height. Defined here (not only in native.css) so pages that don't
     load native.css — e.g. account.html — get a valid var(--nav-h); without it,
     calc(var(--nav-h) + …) is INVALID and the page's top padding collapses,
     tucking the hero under the fixed header. */
  --nav-h:     72px;

  /* Storefront-widget theme bridge. The GLOBAL cart drawer + badge (rendered by
     /bxi-storefront.js outside any section mount) read these. Defining them here
     — synchronously, on every bucket page — means the cart renders in-brand from
     the first paint with NO red→green flash, and the badge number gets the right
     contrast colour. Mirrors the storefront theme; native pages get the same
     values from the server-injected theme, so it's one consistent source. */
  --bxi-sf-accent:    var(--ra-green, #22E06A);
  --bxi-sf-on-accent: var(--ra-base, #0A0B0A);
  --bxi-sf-gradient:  var(--ra-grad-green, linear-gradient(135deg, #22E06A 0%, #16C9A6 100%));

  /* ---------- RADII (gritty: mostly sharp) ---------- */
  --r-0:    0px;
  --r-1:    3px;
  --r-2:    6px;
  --r-3:    12px;
  --r-pill: 999px;

  /* ---------- SHADOWS & GLOWS ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.6);
  --glow-green:  0 0 0 1px rgba(34,224,106,0.4), 0 0 24px rgba(34,224,106,0.35);
  --glow-green-lg: 0 0 40px rgba(34,224,106,0.45), 0 0 80px rgba(34,224,106,0.2);
  --glow-spark:  0 0 24px rgba(255,77,46,0.5);

  /* ---------- MOTION (IMPACT system: fast <200ms) ---------- */
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-rev:   520ms;   /* scroll reveals */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);     /* premium out */
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-impact: cubic-bezier(0.16, 1.2, 0.3, 1);  /* slight overshoot */
}