/* ============================================================================
   SUPER PUFF VAPES — DESIGN TOKENS  ("Midnight vapour")
   ----------------------------------------------------------------------------
   The single source of truth for every colour, size, radius, shadow and
   duration on the site. No other stylesheet may contain a raw hex colour or a
   px font-size — they reference these. Change a value here and the whole site
   follows.

   Section 2 of the design brief defines the core system verbatim. Section 11
   holds derived values the brief's components need (tints, control heights,
   the in-between type sizes it names). Section 12 maps the pre-overhaul token
   names onto the new ones so nothing written against them breaks.
   ============================================================================ */

:root {

  /* --- 1. BRAND ------------------------------------------------------------ */
  --violet-300: #D8B4FE;
  --violet-400: #C084FC;
  --violet-500: #A855F7;
  --violet-600: #9333EA;
  --violet-700: #7C3AED;
  --cyan-300:   #67E8F9;
  --cyan-400:   #22D3EE;
  --cyan-500:   #06B6D4;
  --amber-400:  #FFB020;
  --success:    #34D399;
  --warning:    #FBBF24;
  --danger:     #F87171;

  /* One colour per store, used everywhere a store is referenced. */
  --store-chilliwack: var(--cyan-400);
  --store-abbotsford: var(--violet-400);

  /* The one accent gradient. Primary CTAs, the key headline word, the active
     nav underline, focus glow — nowhere else. */
  --grad-brand: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-500) 50%, var(--cyan-500) 100%);
  --grad-text:  linear-gradient(90deg, var(--cyan-400), var(--violet-400));
  --glow-violet: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 8px 32px -8px rgba(147, 51, 234, 0.55);
  --glow-cyan:   0 0 0 1px rgba(34, 211, 238, 0.35), 0 8px 32px -8px rgba(6, 182, 212, 0.5);

  /* --- 2. INK (backgrounds) ------------------------------------------------ */
  --ink-950: #05070D;
  --ink-900: #070A10;   /* page */
  --ink-800: #0B1020;   /* alternate section */
  --ink-700: #111827;   /* card */
  --ink-600: #1A2236;   /* raised / hover */
  --ink-500: #243049;
  --surface-card:  rgba(17, 24, 39, 0.72);
  --surface-glass: rgba(7, 10, 16, 0.78);
  --line:       rgba(148, 163, 184, 0.12);
  --line-hi:    rgba(148, 163, 184, 0.24);
  --line-hover: rgba(148, 163, 184, 0.40);
  --line-focus: var(--cyan-400);

  /* --- 3. TEXT — every step passes WCAG AA on --ink-900 --------------------
     --text-low was #64748B (~4.0:1 on #070A10, fails AA); now #8391A7. */
  --text-hi:  #F1F5F9;
  --text-mid: #A8B3C7;
  --text-low: #8391A7;
  --text-on-accent: #FFFFFF;
  --text-on-cyan:   #041016;

  /* --- 4. TYPE ------------------------------------------------------------- */
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-icon:    "Material Symbols Outlined";

  --fs-eyebrow: 0.75rem;    /* 12px — uppercase, +0.14em; the smallest size on the site */
  --fs-sm:      0.875rem;   /* 14px */
  --fs-base:    1rem;       /* 16px body */
  --fs-lg:      1.125rem;   /* 18px lead */
  --fs-h4:      1.25rem;    /* 20px card titles */
  --fs-h3:      clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --fs-h2:      clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --ls-eyebrow: 0.14em;
  --ls-caps:    0.12em;
  --ls-heading: -0.02em;
  --ls-display: -0.03em;

  /* --- 5. SPACE (4px grid) ------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(64px, 8vw, 112px);
  --container: 1240px;
  --gutter:    clamp(16px, 4vw, 32px);

  /* --- 6. RADIUS — only these four exist ----------------------------------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* --- 7. ELEVATION -------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -20px rgba(0, 0, 0, 0.75);

  /* --- 8. MOTION ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-reveal-stagger: 60ms;
  --dur-hover-intent: 150ms;

  /* --- 9. LAYOUT ----------------------------------------------------------- */
  --header-h:          80px;
  --header-h-scrolled: 64px;
  --z-header:   100;
  --z-dropdown: 110;
  --z-overlay:  900;
  --z-modal:    1000;

  /* --- 10. DERIVED — sizes the brief's components name ---------------------- */
  --fs-caption:   0.8125rem;  /* 13px — legal line, compliance note, field errors */
  --fs-ui:        0.9375rem;  /* 15px — nav, md buttons, compact body */
  --fs-card-title: 1.0625rem; /* 17px — product card title */
  --fs-price:     1.25rem;    /* 20px — card price */
  --fs-total:     1.375rem;   /* 22px — cart total */
  --fs-price-lg:  2rem;       /* 32px — product page price */
  --fs-phone-lg:  2.5rem;     /* 40px — contact page phone numbers */
  --fs-search:    1.375rem;   /* 22px — search overlay input */
  --fs-icon-sm:   1.125rem;   /* 18px */
  --fs-icon:      1.25rem;    /* 20px */
  --fs-icon-lg:   1.625rem;   /* 26px */

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --input-h:    48px;
  --tap:        44px;
  --icon-btn:   40px;
  --badge:      18px;
  --stepper-btn: 40px;
  --prose:      65ch;
  --prose-wide: 70ch;

  --bw:    1px;
  --bw-md: 1.5px;
  --bw-lg: 2px;
  --bw-accent: 3px;

  /* Tints: status + store colours at card and border strength. */
  --tint-cyan:        rgba(34, 211, 238, 0.12);
  --tint-cyan-line:   rgba(34, 211, 238, 0.30);
  --tint-violet:      rgba(192, 132, 252, 0.12);
  --tint-violet-line: rgba(192, 132, 252, 0.32);
  --tint-success:     rgba(52, 211, 153, 0.12);
  --tint-success-line: rgba(52, 211, 153, 0.30);
  --tint-danger:      rgba(248, 113, 113, 0.08);
  --tint-danger-md:   rgba(248, 113, 113, 0.14);
  --tint-danger-line: rgba(248, 113, 113, 0.25);
  --tint-amber:       rgba(255, 176, 32, 0.10);
  --tint-amber-line:  rgba(255, 176, 32, 0.35);
  --danger-soft:      #FCA5A5;          /* BC strip text, error copy on dark */
  --select-bg:        rgba(168, 85, 247, 0.35);
  --scrim:            rgba(5, 7, 13, 0.92);
  --focus-halo:       0 0 0 4px rgba(34, 211, 238, 0.15);
  --glass-blur:       blur(16px) saturate(140%);
  --glow-orb-violet:  rgba(147, 51, 234, 0.22);
  --glow-orb-cyan:    rgba(34, 211, 238, 0.10);
  --image-backdrop:   radial-gradient(120% 90% at 50% 20%, #151d33 0%, var(--ink-800) 70%);
  --hairline-grad:    linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.5), rgba(34, 211, 238, 0.5), transparent);

  /* Layout measures. */
  --measure:       760px;   /* long-form text column, narrow page rows */
  --measure-head:  720px;   /* centred section heads */
  --measure-card:  560px;   /* empty states, confirmation cards */
  --w-dropdown:    260px;
  --w-drawer:      420px;
  --w-search:      860px;
  --w-select:      240px;
  --w-table:       640px;
  --hero-max-h:    820px;
  --glow-violet-hi: 0 0 0 1px rgba(168, 85, 247, 0.5), 0 14px 40px -10px rgba(147, 51, 234, 0.75);
  --mask-fill:     linear-gradient(#000 0 0);   /* opaque layer for mask-composite borders */

  /* --- 11. LEGACY ALIASES --------------------------------------------------
     Names used before the overhaul. Kept so nothing written against them
     breaks; new code should use the names above. */
  --violet:        var(--violet-400);
  --violet-bright: var(--violet-300);
  --violet-deep:   var(--violet-600);
  --violet-glow:   rgba(147, 51, 234, 0.32);
  --cyan:          var(--cyan-400);
  --cyan-soft:     var(--cyan-300);
  --amber:         var(--amber-400);
  --grad-vapor:    var(--grad-brand);
  --spv-container: var(--container);
  --spv-gutter:    var(--gutter);
  --spv-sec-y:     var(--section-y);
  --spv-sec-y-sm:  var(--s-12);
  --r-xl:   var(--r-lg);
  --r-full: var(--r-pill);
  --fs-xs:  var(--fs-eyebrow);
  --fs-xl:  var(--fs-h4);
  --fs-2xl: var(--fs-h2);
  --fs-3xl: var(--fs-h2);
  --fs-4xl: var(--fs-h1);
  --sp-1: var(--s-1);  --sp-2: var(--s-2);  --sp-3: var(--s-3);  --sp-4: var(--s-4);
  --sp-6: var(--s-6);  --sp-8: var(--s-8);  --sp-12: var(--s-12); --sp-16: var(--s-16);
  --sp-24: var(--s-24);
  --sh-sm: var(--shadow-1);
  --sh-md: var(--shadow-2);
  --sh-lg: var(--shadow-3);
  --t-fast: var(--dur-fast) var(--ease-out);
  --t-base: var(--dur-base) var(--ease-out);
  --t-slow: var(--dur-slow) var(--ease-out);
  --z-drawer:  var(--z-overlay);
  --z-agegate: 9999;
}