/* ==========================================================================
   vape24.me — Design Tokens
   Aesthetic: Editorial Minimalism with Korean Warmth
   ========================================================================== */

:root {
  /* ── Color System ─────────────────────────────────────────────── */
  /* Surfaces */
  --cream:        #F7F3ED;  /* primary background */
  --cream-warm:   #EFE8DC;  /* secondary surfaces, cards */
  --cream-deep:   #E5DCCC;  /* hover states */
  --paper:        #FDFBF7;  /* elevated surfaces */

  /* Ink (text) */
  --ink:          #1A1F1A;  /* primary text, slight green tint — not pure black */
  --ink-soft:     #3A3F3A;  /* headings */
  --ink-muted:    #6B716B;  /* secondary text */
  --ink-quiet:    #9AA09A;  /* tertiary, placeholders */

  /* Mint — signature accent */
  --mint:         #7FCAA8;  /* primary brand mint */
  --mint-deep:    #2D7A5B;  /* CTAs, links — AA contrast on cream */
  --mint-wash:    #E8F4EE;  /* tinted backgrounds */
  --mint-line:    #B8DFCB;  /* subtle mint borders */

  /* Earth */
  --sand:         #D9D0C0;  /* borders, dividers */
  --sand-light:   #E8E0D1;  /* subtle dividers */

  /* Signal */
  --coral:        #E8735B;  /* age warning, alerts */
  --coral-wash:   #FBE8E3;  
  --amber:        #D9A047;  /* regulatory notices */

  /* ── Typography ───────────────────────────────────────────────── */
  --font-serif:   'Fraunces', 'Gowun Batang', 'Noto Serif KR', Georgia, serif;
  --font-sans:    'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Scale (modular, 1.25 ratio) */
  --text-xs:      0.75rem;   /* 12px */
  --text-sm:      0.875rem;  /* 14px */
  --text-base:    1rem;      /* 16px */
  --text-md:      1.125rem;  /* 18px */
  --text-lg:      1.375rem;  /* 22px */
  --text-xl:      1.75rem;   /* 28px */
  --text-2xl:     2.25rem;   /* 36px */
  --text-3xl:     3rem;      /* 48px */
  --text-4xl:     4rem;      /* 64px */
  --text-5xl:     5.5rem;    /* 88px — hero */

  /* Weight */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;

  /* Line height */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-base:      1.5;
  --lh-relaxed:   1.7;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.015em;
  --tracking-base:    0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.12em;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --space-1:      0.25rem;
  --space-2:      0.5rem;
  --space-3:      0.75rem;
  --space-4:      1rem;
  --space-5:      1.5rem;
  --space-6:      2rem;
  --space-8:      3rem;
  --space-10:     4rem;
  --space-12:     6rem;
  --space-16:     8rem;
  --space-20:    12rem;

  /* ── Layout ───────────────────────────────────────────────────── */
  --container:    1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --radius-sm:    4px;
  --radius:       8px;
  --radius-lg:    16px;
  --radius-pill:  999px;

  /* ── Borders & Shadows ────────────────────────────────────────── */
  --border:       1px solid var(--sand);
  --border-ink:   1px solid var(--ink);
  --border-subtle: 1px solid var(--sand-light);

  --shadow-sm:    0 1px 2px rgba(26, 31, 26, 0.04);
  --shadow:       0 2px 8px rgba(26, 31, 26, 0.06), 0 1px 2px rgba(26, 31, 26, 0.04);
  --shadow-lg:    0 10px 30px rgba(26, 31, 26, 0.08), 0 2px 6px rgba(26, 31, 26, 0.04);
  --shadow-mint:  0 8px 24px rgba(127, 202, 168, 0.18);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.55, 0, 0.65, 0.2);
  --duration-fast: 180ms;
  --duration:     280ms;
  --duration-slow: 520ms;

  /* ── Grain texture ────────────────────────────────────────────── */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ── Base Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--cream);
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  min-height: 100vh;

  /* subtle grain overlay for atmosphere */
  background-image: var(--grain);
  background-size: 200px 200px;
  background-attachment: fixed;
}

/* Typographic primitives */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-feature-settings: 'ss01';
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { line-height: var(--lh-relaxed); }

a {
  color: var(--mint-deep);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--duration-fast) var(--ease);
}

a:hover {
  text-decoration: underline;
}

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

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

::selection {
  background: var(--mint);
  color: var(--ink);
}

/* Utility: screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}