/* Viper Vape · Kush & Coil — Design Tokens */
/* Fonts are enqueued via functions.php (kcr-fonts) with preconnect for faster first paint. */

:root {
  /* ── Brand colours ─────────────────────────────── */
  --vv-black:      #0E0E0E;
  --vv-ink:        #1A1A1A;
  --vv-white:      #FFFFFF;
  --vv-bone:       #F7F7F5;

  /* Viper Green — darkened for retail weight */
  --vv-green-700:  #2F7A2C;
  --vv-green-600:  #3F9A3A;
  --vv-green-500:  #52B84A;
  --vv-green-50:   #EAF7E8;

  /* Kush Yellow — aligned with live brand */
  --vv-yellow-500: #F4C430;
  --vv-yellow-600: #E0AE14;

  /* Grey scale */
  --vv-grey-900:   #1F1F1F;
  --vv-grey-800:   #2A2A2A;
  --vv-grey-700:   #3F3F3F;
  --vv-grey-600:   #595959;
  --vv-grey-500:   #7A7A7A;
  --vv-grey-400:   #9A9A9A;
  --vv-grey-300:   #C9C9C9;
  --vv-grey-200:   #E6E6E3;
  --vv-grey-150:   #ECECEA;
  --vv-grey-100:   #F2F2F0;
  --vv-grey-50:    #FAFAF8;

  --vv-sale:       #C0392B;
  --vv-success:    #2F7A2C;
  --vv-warning:    #E0AE14;
  --vv-danger:     #C0392B;
  --vv-info:       #2563EB;

  /* ── Semantic tokens ────────────────────────────── */
  --bg:            var(--vv-white);
  --bg-alt:        var(--vv-bone);
  --bg-inverse:    var(--vv-black);
  --surface:       var(--vv-white);

  --fg:            var(--vv-ink);
  --fg-muted:      var(--vv-grey-600);

  --border:        var(--vv-grey-200);

  --accent:        var(--vv-green-700);
  --accent-hover:  var(--vv-green-600);
  --accent-fg:     var(--vv-white);

  --highlight:     var(--vv-yellow-500);
  --highlight-fg:  var(--vv-ink);

  /* ── Typography — retail, not street ───────────── */
  --ff-display:    'Inter Tight', system-ui, sans-serif;
  --ff-body:       'Inter', system-ui, sans-serif;

  /* Fluid type scale */
  --fs-hero:  clamp(2.25rem, 4.8vw, 3.75rem);
  --fs-d1:    clamp(2rem,   4vw, 3rem);
  --fs-h1:    clamp(1.75rem, 3vw, 2.5rem);
  --fs-h2:    clamp(1.375rem, 2.2vw, 1.875rem);
  --fs-h3:    1.125rem;
  --fs-h4:    1rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ── Spacing ─────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ── Radii ───────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(14,14,14,.06), 0 1px 3px rgba(14,14,14,.04);
  --shadow-md: 0 8px 24px rgba(14,14,14,.08);
  --shadow-lg: 0 18px 40px rgba(14,14,14,.10);

  /* ── Layout ──────────────────────────────────────── */
  --shell:         min(1280px, calc(100vw - 2rem));
  --shell-narrow:  min(960px,  calc(100vw - 2rem));
  --header-height: 44px;

  /* ── Motion ──────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  360ms;

  /* ── Focus ───────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(82,184,74,.35);

  /* ── Glass surfaces ─────────────────────────────── */
  --glass-bg:            rgba(255, 255, 255, 0.62);
  --glass-bg-strong:     rgba(255, 255, 255, 0.78);
  --glass-bg-tinted:     rgba(234, 247, 232, 0.55);
  --glass-border:        rgba(14, 14, 14, 0.08);
  --glass-border-strong: rgba(14, 14, 14, 0.14);
  --glass-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --glass-shadow:        0 12px 32px rgba(14, 14, 14, 0.08), 0 2px 6px rgba(14, 14, 14, 0.05);
  --glass-blur:          18px;
  --glass-blur-strong:   28px;
  --glass-radius:        var(--r-lg);

  /* ── Glow / focus ───────────────────────────────── */
  --glow-accent:   0 0 0 4px rgba(82, 184, 74, 0.25), 0 8px 24px rgba(82, 184, 74, 0.18);
  --glow-warning:  0 0 0 4px rgba(244, 196, 48, 0.30);

  /* ── Elevation (Takealot-like layering) ─────────── */
  --elev-1: 0 1px 2px rgba(14,14,14,.05);
  --elev-2: 0 4px 10px rgba(14,14,14,.06), 0 1px 2px rgba(14,14,14,.04);
  --elev-3: 0 12px 28px rgba(14,14,14,.10), 0 2px 4px rgba(14,14,14,.04);
}

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
          backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  border-radius: var(--glass-radius);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-strong { background: var(--glass-bg-strong); }
}

/* ── Base element defaults ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-d1);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: none;
  margin: 0;
}
h3, .h3 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: 0;
}
h4, .h4 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-small);
  margin: 0;
}
p { margin: 0; }
a { cursor: pointer; }
button { font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }

.display-hero {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 18ch;
}

/* Neutralise any lingering .street usage */
.street {
  font-family: var(--ff-display);
  color: var(--vv-ink);
  -webkit-text-stroke: 0;
}

.eyebrow {
  font: 600 var(--fs-micro)/1.4 var(--ff-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

::selection { background: var(--accent); color: var(--accent-fg); }

/* Focus-visible baseline */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}