/* ─────────────────────────────────────────────────────────────────────────
 * suononvapes.com · tokens.css — Premium Gold DNA
 * Gold (#F9C349) + Deep Brown (#1E1810) + Oswald display + Roboto body
 * 2026-05-21 · v1.0 (Suonon Vape)
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── CORE PALETTE ─────────────────────────────────────────── */
  --sn-gold:        #F9C349;
  --sn-gold-hover:  #FFB100;
  --sn-gold-deep:   #C9881B;
  --sn-gold-soft:   #FDF8EC;
  --sn-bronze:      #8A6B1E;
  --sn-dark:        #1E1810;
  --sn-dark-2:      #2A2218;
  --sn-cream:       #F8F7F3;

  /* ── INK SCALE (text + borders) ───────────────────────────── */
  --sn-ink:         #1E1810;
  --sn-ink-2:       #4B4F58;
  --sn-ink-3:       #62615C;
  --sn-ink-4:       #9A938A;
  --sn-hair:        rgba(30, 24, 16, 0.08);
  --sn-hair-2:      rgba(30, 24, 16, 0.16);

  /* ── ON-DARK INK (text over dark-brown surfaces) ──────────── */
  --sn-on-dark:     #FDF8EC;
  --sn-on-dark-2:   #E8DDC1;
  --sn-on-dark-3:   #B8AC93;

  /* ── SEMANTIC ─────────────────────────────────────────────── */
  --sn-ok:          #2BB876;
  --sn-warn:        #FFB100;
  --sn-err:         #E5483B;
  --sn-strike:      #9A938A;

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

  /* ── RADII (squared/sharp per Suonon DNA) ─────────────────── */
  --sn-r-xs:    0;
  --sn-r-sm:    2px;
  --sn-r-md:    4px;
  --sn-r-lg:    6px;
  --sn-r-pill:  999px;

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

  /* ── SHADOW ───────────────────────────────────────────────── */
  --sn-shadow-sm:  0 1px 2px rgba(30, 24, 16, 0.08);
  --sn-shadow-md:  0 4px 12px rgba(30, 24, 16, 0.10);
  --sn-shadow-lg:  0 12px 40px -8px rgba(30, 24, 16, 0.18);
  --sn-shadow-gold: 0 8px 24px -6px rgba(249, 195, 73, 0.45);

  /* ── GRADIENT ─────────────────────────────────────────────── */
  --sn-grad-gold:  linear-gradient(135deg, #F9C349 0%, #FFB100 100%);
  --sn-grad-dark:  linear-gradient(135deg, #1E1810 0%, #2A2218 60%, #1E1810 100%);

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

/* ─── BASELINE RESET / TYPOGRAPHY ─────────────────────────────────────── */
html {
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
body {
  background: #fff;
  color: var(--sn-ink-2);
  font: 400 16px/1.55 var(--sn-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(--sn-gold-deep); }
img, svg { max-width: 100%; height: auto; display: block; }
[x-cloak] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sn-font-display);
  font-weight: 700;
  color: var(--sn-ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

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