/* ═══════════════════════════════════════════════════════════════
   RAZ VAPE — "STOCK ISSUE" Design System (Direction B locked)
   raz-vape.com · Pomona CA warehouse
   2026-05-12 — replaces the prior "Technical Documentation" tokens.
   Tokens only. Component styles live in core.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Stock Issue palette ─── */
  --rz-paper:      #F5F5F2;   /* paper bg (warm off-white) */
  --rz-paper-2:    #FFFFFF;   /* card bg */
  --rz-ink:        #0A0A0A;   /* near-black ink */
  --rz-ink-2:      #1F1F1F;   /* secondary ink (body copy) */
  --rz-ink-muted:  #6B6B68;   /* muted captions / labels */
  --rz-rule:       #1F1F1F;   /* heavy 1.5px border ink */
  --rz-rule-lite:  #D8D8D2;   /* hairline 1px paper-tone rule */
  --rz-accent:     #FF3815;   /* vermilion red — signal */
  --rz-accent-soft:#FFE2DD;
  --rz-yellow:     #F0D530;   /* hi-vis safety yellow */
  --rz-yellow-soft:#FBF1B0;

  /* Backwards-compat aliases (existing njk + Alpine reference --rz-red) */
  --rz-red:        var(--rz-accent);
  --rz-red-dark:   #C72100;
  --rz-warm:       #C19A83;

  /* ─── Status colors (dense, retail-flat) ─── */
  --rz-ok:         #15803D;
  --rz-warn:       var(--rz-yellow);
  --rz-err:        var(--rz-accent);

  /* ─── Font stack (Direction B: Archivo + Geist Mono) ─── */
  --rz-font-display: "Archivo", "Helvetica Neue", -apple-system, sans-serif;
  --rz-font-sans:    "Archivo", "Helvetica Neue", -apple-system, sans-serif;
  --rz-font-mono:    "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --rz-font-serif:   "Newsreader", Georgia, serif;

  /* ─── Type scale ─── */
  --rz-fs-xs:    10px;
  --rz-fs-sm:    12px;
  --rz-fs-base:  15px;
  --rz-fs-md:    16px;
  --rz-fs-lg:    18px;
  --rz-fs-xl:    22px;
  --rz-fs-2xl:   28px;
  --rz-fs-3xl:   38px;
  --rz-fs-4xl:   56px;
  --rz-fs-5xl:   80px;
  --rz-fs-6xl:   120px;
  --rz-lh:       1.55;
  --rz-lh-tight: 1.25;
  --rz-lh-display: 0.92;

  /* ─── Radii (Stock Issue = sharp, 0 default) ─── */
  --rz-r-xs:   0;
  --rz-r-sm:   0;
  --rz-r-md:   0;
  --rz-r-lg:   0;
  --rz-r-pill: 999px;

  /* ─── Spacing scale ─── */
  --rz-s-1:    4px;
  --rz-s-2:    8px;
  --rz-s-3:    12px;
  --rz-s-4:    16px;
  --rz-s-5:    24px;
  --rz-s-6:    32px;
  --rz-s-7:    40px;
  --rz-s-8:    48px;
  --rz-s-9:    56px;
  --rz-s-10:   64px;
  --rz-s-12:   80px;
  --rz-s-14:   96px;

  /* ─── Container widths ─── */
  --rz-max-w:     1200px;
  --rz-max-w-nb:  920px;   /* narrow body for blog reading */
  --rz-pad-x:     32px;

  /* ─── Borders (Stock Issue: 1.5px ink primary, 1px lite secondary) ─── */
  --rz-bd:        1.5px solid var(--rz-rule);
  --rz-bd-lite:   1px solid var(--rz-rule-lite);
  --rz-bd-thick:  2px solid var(--rz-rule);

  /* ─── Label / caps tracking (mono micro caption) ─── */
  --rz-label-track: 0.12em;
}

/* ─── Global reset ─── */
html, body {
  background: var(--rz-paper);
  color: var(--rz-ink);
  font-family: var(--rz-font-sans);
  font-size: var(--rz-fs-base);
  line-height: var(--rz-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none;
}
a:hover { color: var(--rz-accent); }

img, svg { max-width: 100%; height: auto; display: block; }

code, kbd, samp, pre {
  font-family: var(--rz-font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: var(--rz-bd);
  margin: var(--rz-s-7) 0;
}

::selection {
  background: var(--rz-yellow);
  color: var(--rz-ink);
}

button { font: inherit; cursor: pointer; }

[x-cloak] { display: none !important; }