/* ──────────────────────────────────────────────────────────────────
   WOLF GRIP — Design tokens
   Colors, typography, spacing, shadow, radius, motion.
   Use the semantic vars (--h1, --bg, --fg, --accent, etc.) in
   product code; the raw scale vars (--wg-red-600, etc.) are for
   building new semantic tokens, not for direct consumption.
   ────────────────────────────────────────────────────────────────── */

/* Type — load from Google Fonts CDN.
   Display: Anton (close match to the distressed condensed display
   used on campaign headlines — the distress is a texture overlay,
   not a font feature). Body: Barlow + Barlow Condensed.
   ⚠ Anton is a SUBSTITUTE for the campaign headline face — flag to
   the user if a custom condensed display is desired. The Wolf Grip
   wordmark logo itself is bespoke and used as an SVG/PNG asset. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap");

:root {
  /* ── RAW COLOR SCALE ─────────────────────────────────────────── */
  /* Wolf Grip Red — the brand red. Used sparingly as an accent.    */
  --wg-red-900: #7A1219;
  --wg-red-800: #9A1822;
  --wg-red-700: #B71D29;
  --wg-red-600: #C8202B;   /* PRIMARY BRAND RED */
  --wg-red-500: #D93641;
  --wg-red-400: #E55A63;
  --wg-red-300: #F08A91;

  /* Ink — deep near-black, the dominant brand surface.             */
  --wg-ink-1000: #050506;  /* photographic blacks                   */
  --wg-ink-900:  #0A0A0B;  /* primary background                    */
  --wg-ink-800:  #131316;  /* card surfaces on dark                 */
  --wg-ink-700:  #1C1C1F;  /* raised surfaces / hover               */
  --wg-ink-600:  #26262A;  /* hairline dividers on dark             */
  --wg-ink-500:  #3A3A3F;  /* secondary text on dark? no — too dim */

  /* Concrete — neutral cool greys for UI chrome.                  */
  --wg-grey-700: #4A4A4F;
  --wg-grey-600: #6B6B70;
  --wg-grey-500: #8E8E93;
  --wg-grey-400: #B4B4B8;
  --wg-grey-300: #D2D2D4;
  --wg-grey-200: #E5E5E5;
  --wg-grey-100: #F1F0EC;  /* warm light                            */

  /* Bone — warm off-white. The default "light" surface.            */
  --wg-bone:     #F4F0E8;
  --wg-chalk:    #FFFFFF;  /* pure white only when needed           */

  /* Functional tape colors — secondary product accents.            */
  --wg-tape-red:    #C8202B;
  --wg-tape-purple: #5B2B8C;
  --wg-tape-black:  #1A1A1C;
  --wg-tape-pink:   #E84B6E;
  --wg-tape-blue:   #1E4FA3;
  --wg-tape-green:  #2D6A3E;

  /* ── SEMANTIC COLOR TOKENS ───────────────────────────────────── */
  /* Default theme is DARK — this is a strong, gritty brand.        */
  --bg:           var(--wg-ink-900);
  --bg-elevated:  var(--wg-ink-800);
  --bg-raised:    var(--wg-ink-700);
  --bg-inverse:   var(--wg-bone);

  --fg:           var(--wg-bone);            /* primary text on dark */
  --fg-muted:     var(--wg-grey-400);        /* secondary text       */
  --fg-subtle:    var(--wg-grey-600);        /* tertiary             */
  --fg-inverse:   var(--wg-ink-900);         /* text on light bg     */

  --accent:       var(--wg-red-600);
  --accent-hover: var(--wg-red-700);
  --accent-press: var(--wg-red-800);
  --on-accent:    var(--wg-chalk);

  --line:         var(--wg-ink-600);         /* hairline on dark     */
  --line-strong:  var(--wg-grey-700);
  --line-light:   var(--wg-grey-200);        /* on light surfaces    */

  --success: #2D6A3E;
  --danger:  var(--wg-red-600);
  --warning: #E0A12B;

  /* ── SPACING (8pt-derived w/ 4pt half-step) ──────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── RADIUS ──────────────────────────────────────────────────── */
  /* Wolf Grip is mostly SQUARE. Radii are intentionally tight.     */
  --radius-0:    0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* default card                          */
  --radius-lg:   10px;    /* rare — pills/avatars                  */
  --radius-pill: 999px;

  /* ── BORDER ──────────────────────────────────────────────────── */
  --border-hairline: 1px;
  --border-rule:     2px;     /* the red rule under headlines      */
  --border-bold:     3px;

  /* ── SHADOW / ELEVATION ──────────────────────────────────────── */
  /* Tight, low-blur shadows. Avoid soft puffy SaaS shadows.        */
  --shadow-sm: 0 1px 0 rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 2px 0 rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 0 rgba(0,0,0,.5), 0 18px 36px rgba(0,0,0,.45);
  --shadow-press: inset 0 2px 0 rgba(0,0,0,.4);

  /* ── MOTION ──────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.5, 0, .75, 0);
  --ease-snap:  cubic-bezier(.65, .05, .35, 1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     420ms;

  /* ── TYPE FAMILIES ───────────────────────────────────────────── */
  --font-display: "Anton", "Oswald", "Impact", "Arial Narrow", system-ui, sans-serif;
  --font-cond:    "Barlow Condensed", "Oswald", system-ui, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ── TYPE SCALE — fluid via clamp() at desktop ───────────────── */
  /* Display headlines (campaign-grade): tall, condensed, all caps. */
  --fs-d1: clamp(56px, 9vw,  140px);
  --fs-d2: clamp(44px, 6.5vw, 96px);
  --fs-d3: clamp(36px, 5vw,  72px);

  /* Section headings & UI titles. */
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 16px;

  /* Body & UI. */
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* Line heights. Display is tight to the metal. */
  --lh-display: 0.88;
  --lh-heading: 1.05;
  --lh-body:    1.5;
  --lh-ui:      1.3;

  /* Tracking. */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;   /* small caps labels                */
  --tracking-eyebrow: 0.18em;  /* big tracked eyebrows             */

  /* Containers / grid. */
  --container-max: 1440px;
  --container-pad-mobile:  20px;
  --container-pad-desktop: 64px;
}

/* ── LIGHT SURFACE (opt-in, e.g. PDP body) ────────────────────── */
.surface-light, [data-surface="light"] {
  --bg:          var(--wg-bone);
  --bg-elevated: var(--wg-chalk);
  --bg-raised:   var(--wg-chalk);
  --fg:          var(--wg-ink-900);
  --fg-muted:    var(--wg-grey-700);
  --fg-subtle:   var(--wg-grey-500);
  --line:        var(--wg-grey-200);
  --line-strong: var(--wg-grey-400);
}

/* ── BASE TEXT STYLES ─────────────────────────────────────────── */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

/* Display — campaign hero headlines. Always caps. */
.wg-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  font-weight: 400;
}
.wg-display-2 { font-family: var(--font-display); font-size: var(--fs-d2); line-height: var(--lh-display); text-transform: uppercase; font-weight: 400; }
.wg-display-3 { font-family: var(--font-display); font-size: var(--fs-d3); line-height: var(--lh-display); text-transform: uppercase; font-weight: 400; }

/* Headings. */
h1, .wg-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); text-transform: uppercase; font-weight: 400; letter-spacing: 0; }
h2, .wg-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); text-transform: uppercase; font-weight: 400; }
h3, .wg-h3 { font-family: var(--font-cond);    font-size: var(--fs-h3); line-height: var(--lh-heading); text-transform: uppercase; font-weight: 700; letter-spacing: var(--tracking-wide); }
h4, .wg-h4 { font-family: var(--font-cond);    font-size: var(--fs-h4); line-height: var(--lh-heading); text-transform: uppercase; font-weight: 700; letter-spacing: var(--tracking-wide); }
h5, .wg-h5 { font-family: var(--font-body);    font-size: var(--fs-h5); line-height: var(--lh-ui);      font-weight: 700; }

/* Eyebrows & small caps labels. */
.wg-eyebrow {
  font-family: var(--font-cond);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent);
}
.wg-label {
  font-family: var(--font-cond);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

/* Body. */
p, .wg-p          { font-family: var(--font-body); font-size: var(--fs-body);    line-height: var(--lh-body); }
.wg-p-lg          { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.wg-p-sm          { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.wg-caption       { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-ui);   color: var(--fg-muted); }
.wg-micro         { font-family: var(--font-cond); font-size: var(--fs-micro);   line-height: 1.2; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); }

/* Code. */
code, .wg-mono { font-family: var(--font-mono); font-size: 0.9em; }

/* The red hairline rule — used under headlines and as a section delimiter. */
.wg-rule {
  display: block;
  width: 48px;
  height: var(--border-rule);
  background: var(--accent);
  border: 0;
  margin: var(--space-4) 0;
}
.wg-rule--wide { width: 96px; }
.wg-rule--full { width: 100%; }