/**
 * VAPECOD — final Homepage master tokens
 * Primary canvas: 390px · Desktop: 1440px
 */

:root {
  --ink: #111111;
  --ink-soft: #2a2a2a;
  --muted: #6e6e6e;
  --faint: #9b9b9b;
  --line: #ececec;
  --page: #ffffff;
  --surface: #ffffff;
  --media: #f3f3f3;
  --topbar: #0a0a0a;
  --footer-m: #111111;
  --footer-d: #f3f3f3;
  --pink: #f3e6ea;
  --lavender: #e8e4f2;
  --teal: #1f6f6a;
  --teal-deep: #155652;
  --purple: #6b2fd6;
  --purple-deep: #140026;
  --purple-mid: #3a1570;
  --cta-purple: #6a2fd4;

  --font: "Figtree", "Segoe UI", sans-serif;
  --font-script: "Great Vibes", cursive;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-card: 0 4px 16px rgba(17, 17, 17, 0.05);
  --shadow-soft: 0 2px 8px rgba(17, 17, 17, 0.04);

  --gutter: 16px;
  --gutter-d: 48px;
  --max: 100%;
  --max-wide: 100%;

  --header-h: 56px;
  --header-h-d: 72px;
  --icon: 22px;
  --gap: 12px;
  --media-inset: 16px;
}

@media (min-width: 360px) and (max-width: 374px) {
  :root { --gutter: 14px; --gap: 10px; --media-inset: 14px; }
}

@media (min-width: 412px) {
  :root { --gutter: 18px; }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 40px;
    --gutter-d: 48px;
    --gap: 22px;
    --media-inset: 18px;
    --max: 1360px;
    --max-wide: 1360px;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter-d: 48px;
    --max: 1360px;
    --max-wide: 1360px;
  }
}