/* ═══════════════════════════════════════════════════════════════════
   LOST MARY VAPE — "PURPLE CINEMA" Design System
   lostmary-vape.com · Moreno Valley, CA warehouse · US authorized distributor
   2026-05-23 — Direction A. Black-and-white slabs, single signal purple,
   lots of whitespace. Display: Archivo Black. Body: Inter. Mono: JetBrains
   Mono. Tokens migrated from "Community Purple" — selector surface in
   core.css resolves unchanged, only the colour/font cascade swaps.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surface (white paper, paper-warmth, full black slabs) ───── */
  --lm-paper:        #FFFFFF;           /* page background — pure white */
  --lm-paper-2:      #FFFFFF;           /* secondary slab — collapsed to pure white (user reads any grey as cream/yellow 2026-05-23) */
  --lm-paper-3:      #FFFFFF;           /* card surface — pure white */
  --lm-paper-4:      #F2F2F4;           /* hover / pressed — faint cool grey, used sparingly */
  --lm-paper-glass:  rgba(255, 255, 255, 0.92);

  /* Full-ink slabs (black hero, header, footer, dark sections) */
  --lm-black:        #000000;
  --lm-ink-deep:     #0a0a0c;

  /* ── Ink (Purple-Cinema text scale on paper) ─────────────────── */
  --lm-ink:          #0d0d0e;          /* primary headings + body ink */
  --lm-ink-2:        #5a5a5e;          /* secondary text */
  --lm-ink-muted:    #5a5a5e;          /* tertiary / metadata (alias of ink-2) */
  --lm-ink-faint:    #8a8a8e;          /* placeholder, disabled */

  /* ── Rules / borders (hairline) ──────────────────────────────── */
  --lm-rule:         #E6E6E8;          /* hairline on paper */
  --lm-rule-d:       #1C1C1F;          /* hairline on black */
  --lm-rule-lite:    #F1F1F2;
  --lm-bd:           #D6D6D8;
  --lm-bd-lite:      #E6E6E8;
  --lm-bd-thick:     #0d0d0e;

  /* ── Signal (the only colour in the system) ──────────────────── */
  --lm-accent:       #8a3ffc;          /* signal purple — CTA, prices, accents */
  --lm-accent-2:     #A06BFF;          /* signal-on-dark — lighter purple, used over black */
  --lm-accent-soft:  rgba(138, 63, 252, 0.08);
  --lm-accent-glow:  rgba(138, 63, 252, 0.18);
  --lm-accent-tint:  #F3ECFF;          /* very light purple tint — table zebra, badge bg */
  --lm-accent-pale:  #C8AEFF;          /* mid-tone purple — outline links */

  /* Alias kept so legacy core.css `var(--lm-violet)` still resolves */
  --lm-violet:       #8a3ffc;
  --lm-violet-soft:  rgba(138, 63, 252, 0.08);
  /* Same for cyan/magenta — they collapse to the same signal purple
     so any one-off coloured chrome lands inside the system. */
  --lm-cyan:         #8a3ffc;
  --lm-cyan-soft:    rgba(138, 63, 252, 0.08);
  --lm-magenta:      #8a3ffc;
  --lm-magenta-soft: rgba(138, 63, 252, 0.08);

  /* Legacy aliases for any "red" references — collapse to signal */
  --lm-red:          var(--lm-accent);
  --lm-red-dark:     #6320d4;
  --lm-warm:         #A06BFF;          /* warm tint inside dark slabs */

  /* ── Status (compliance red ONLY for NY/warnings) ────────────── */
  --lm-ok:           #1f9d62;
  --lm-warn:         #cf2418;          /* compliance red — NY · warnings only */
  --lm-warn-2:       #ff8a82;          /* on-dark compliance red */
  --lm-err:          #cf2418;
  --lm-yellow:       #8a3ffc;          /* collapsed to signal purple — Purple Cinema has no yellow */
  --lm-yellow-soft:  rgba(138, 63, 252, 0.12);

  /* ── Family hues (used inside flavor cards, never page chrome) ─ */
  --lm-fam-iced:     #8a3ffc;
  --lm-fam-sour:     #8a3ffc;
  --lm-fam-mint:     #8a3ffc;
  --lm-fam-candy:    #8a3ffc;
  --lm-fam-fruit:    #8a3ffc;
  --lm-fam-zodiac:   #8a3ffc;
  --lm-fam-limited:  #8a3ffc;

  /* ── Typography — Purple Cinema font stack ───────────────────── */
  --lm-font-display: 'Archivo Black', 'Archivo', 'Inter', system-ui, sans-serif;
  --lm-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --lm-font-nav:     'Inter', system-ui, sans-serif;
  --lm-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --lm-font-serif:   'Inter', system-ui, sans-serif;       /* no serif in this direction */
  --lm-font-eyebrow: 'JetBrains Mono', ui-monospace, monospace;

  --lm-fs-xs:   11px;
  --lm-fs-sm:   13px;
  --lm-fs-base: 15px;
  --lm-fs-md:   15px;
  --lm-fs-lg:   17px;
  --lm-fs-xl:   20px;
  --lm-fs-2xl:  26px;
  --lm-fs-3xl:  36px;
  --lm-fs-4xl:  54px;
  --lm-fs-5xl:  72px;
  --lm-fs-6xl:  96px;
  --lm-fs-7xl: 128px;

  --lm-lh:         1.55;
  --lm-lh-tight:   1.05;
  --lm-lh-display: 0.94;

  --lm-label-track:   0.22em;            /* mono eyebrow uppercase tracking */
  --lm-display-track: -0.028em;          /* Archivo Black tight letter-spacing */

  /* ── Spacing scale (4px base) ────────────────────────────────── */
  --lm-s-1:  4px;
  --lm-s-2:  8px;
  --lm-s-3:  12px;
  --lm-s-4:  16px;
  --lm-s-5:  20px;
  --lm-s-6:  24px;
  --lm-s-7:  32px;
  --lm-s-8:  40px;
  --lm-s-9:  56px;
  --lm-s-10: 72px;
  --lm-s-11: 96px;
  --lm-s-12: 128px;
  --lm-s-14: 96px;

  --lm-max-w:    1200px;
  --lm-max-w-nb:  920px;
  --lm-pad-x:     32px;

  /* ── Radii — Purple Cinema runs FLAT, pill only for CTAs ─────── */
  --lm-r-xs:   0;
  --lm-r-sm:   0;
  --lm-r-md:   0;
  --lm-r-lg:   0;
  --lm-r-xl:   0;
  --lm-r-pill: 999px;

  /* ── Border shorthand aliases ────────────────────────────────── */
  --lm-bd-sh:       1px solid #D6D6D8;
  --lm-bd-lite-sh:  1px solid #E6E6E8;
  --lm-bd-thick-sh: 1px solid #0d0d0e;   /* "thick" in Purple Cinema = ink-black hairline */

  /* ── Rule (table row + section divider) ──────────────────────── */
  --lm-line:        #E6E6E8;

  /* ── Shadows — Purple Cinema has NO shadows. Tokens stay defined
        for legacy lookups but render as none / extremely faint. ─── */
  --lm-shadow-card: none;
  --lm-shadow-elev: 0 1px 2px rgba(0,0,0,0.04);
  --lm-shadow-glow-orange:  0 0 0 1px var(--lm-accent);
  --lm-shadow-glow-cyan:    0 0 0 1px var(--lm-accent);
  --lm-shadow-glow-magenta: 0 0 0 1px var(--lm-accent);
  --lm-shadow-glow-violet:  0 0 0 1px var(--lm-accent);
}

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

* { box-sizing: border-box; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--lm-accent); }

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

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

hr {
  border: 0;
  border-top: 1px solid var(--lm-rule);
  margin: var(--lm-s-7) 0;
}

::selection {
  background: var(--lm-accent);
  color: #FFFFFF;
}

button { font: inherit; cursor: pointer; }

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

/* ═══════════════════════════════════════════════════════════════════
   Typography baselines — Archivo Black display + Inter body
   Purple Cinema DNA: tight letter-spacing, 0.94 line-height, NO
   decorative underline (the soft `h2::after` purple bar is gone).
   ═══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lm-font-display);
  font-weight: 900;
  color: var(--lm-ink);
  line-height: var(--lm-lh-display);
  letter-spacing: var(--lm-display-track);
  margin: 0 0 var(--lm-s-4);
  text-transform: none;
}

h1 { font-size: var(--lm-fs-5xl); line-height: 0.94; }
h2 { font-size: var(--lm-fs-4xl); line-height: 0.96; position: relative; padding-bottom: 0; }
h2::after { content: none; display: none; }
h3 { font-size: var(--lm-fs-3xl); line-height: 1.0; }
h4 { font-size: var(--lm-fs-2xl); line-height: 1.05; }
h5 { font-size: var(--lm-fs-xl); line-height: 1.1; }
h6 { font-size: var(--lm-fs-xs); text-transform: uppercase; letter-spacing: var(--lm-label-track); font-family: var(--lm-font-mono); font-weight: 600; color: var(--lm-ink-2); }