/* ─────────────────────────────────────────────────────────────────────────
 * adjust-vape.com · tokens.css — Problem Solver DNA
 * Star-blue (#1B64F6) + Deep-space (#0A1628) + Oswald display + Roboto body
 * 2026-05-21 · v1.0 (Adjust Vape)
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── CORE PALETTE (Adjust Vape — brand green + charcoal per site-config) ── */
  --av-blue:        #22c55e;  /* legacy var name preserved for selector compat */
  --av-blue-deep:   #16a34a;
  --av-blue-bright: #4ade80;
  --av-green:       #22c55e;
  --av-green-deep:  #16a34a;
  --av-space:       #1a1a2e;
  --av-space-2:     #242444;
  --av-ice:         #F0FDF4;
  --av-ice-2:       #F7FEF9;
  --av-trust-bg:    #f0fdf4;
  --av-trust-bd:    #d4edda;
  --av-sale:        #ef4444;

  /* ── INK SCALE (text + borders) ───────────────────────────── */
  --av-ink:         #0A1628;
  --av-ink-2:       #4B4F58;
  --av-ink-3:       #5A6B80;
  --av-ink-4:       #94A1B5;
  --av-hair:        rgba(10, 22, 40, 0.08);
  --av-hair-2:      rgba(10, 22, 40, 0.16);

  /* ── ON-DARK INK (text over space-blue surfaces) ──────────── */
  --av-on-dark:     #EEF2F8;
  --av-on-dark-2:   #C7D2E0;
  --av-on-dark-3:   #8AA0BC;

  /* ── SEMANTIC ─────────────────────────────────────────────── */
  --av-ok:          #2BB876;
  --av-warn:        #FFB72B;
  --av-err:         #E5483B;
  --av-strike:      #94A1B5;

  /* ── FONT STACK ───────────────────────────────────────────── */
  --av-font-display: "Oswald", "Arial Narrow", sans-serif;
  --av-font-body:    "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;
  --av-font-mono:    ui-monospace, "JetBrains Mono", Consolas, monospace;

  /* ── RADII ────────────────────────────────────────────────── */
  --av-r-xs:    3px;
  --av-r-sm:    6px;
  --av-r-md:    8px;
  --av-r-lg:    12px;
  --av-r-pill:  999px;

  /* ── LAYOUT ───────────────────────────────────────────────── */
  --av-container:  1200px;
  --av-pad-x:      24px;
  --av-pad-x-lg:   48px;

  /* ── SHADOW ───────────────────────────────────────────────── */
  --av-shadow-sm:  0 1px 2px rgba(10, 22, 40, 0.08);
  --av-shadow-md:  0 4px 12px rgba(10, 22, 40, 0.10);
  --av-shadow-lg:  0 12px 40px -8px rgba(10, 22, 40, 0.18);
  --av-shadow-blue: 0 8px 24px -6px rgba(27, 100, 246, 0.35);

  /* ── GRADIENT ─────────────────────────────────────────────── */
  --av-grad-galaxy: radial-gradient(ellipse at 30% 20%, #1B64F6 0%, #0A1628 60%, #050B17 100%);
  --av-grad-nebula: linear-gradient(135deg, #1B64F6 0%, #4D85FF 50%, #8AA0BC 100%);

  /* ── TRANSITION ───────────────────────────────────────────── */
  --av-t-fast:  120ms;
  --av-t:       200ms;
  --av-t-slow:  320ms;
  --av-ease:    cubic-bezier(.4, 0, .2, 1);
}

/* ─── BASELINE RESET / TYPOGRAPHY ─────────────────────────────────────── */
html {
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
body {
  background: #fff;
  color: var(--av-ink-2);
  font: 400 16px/1.55 var(--av-font-body);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--av-blue); }
img, svg { max-width: 100%; height: auto; display: block; }
[x-cloak] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--av-font-display);
  font-weight: 700;
  color: var(--av-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}