/* ============================================================
   SNOW PEAK KOREA — Design System
   colors_and_type.css
   Source: snowpeak.co.kr (splash + apparel sub-site snowpeakstore.co.kr)
   Aesthetic: Japanese minimalism, Korean restraint, premium outdoor.
   Cream off-white surfaces, near-black ink, restrained accents,
   the signature "＊" asterisk as graphic punctuation.
   ============================================================ */

/* ---- Fonts ----
   Korean: Pretendard (de-facto modern Korean web standard)
   Latin: Helvetica Neue / Inter fallback — geometric sans, light weights.
   Note: Pretendard ships variable weights from 100–900; we lean on
   200 (light) and 300 (regular) for body, 500–600 for emphasis. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");

:root {
  /* ---------- COLOR — Surfaces ---------- */
  --bg:        #FFFFFF;   /* product art plates, hover lift */
  --bg-cream:  #F5F2EC;   /* signature warm off-white — page default */
  --bg-paper:  #ECE7DA;   /* darker paper — alt sections, footer */
  --bg-shadow: #1A1A1A;   /* full-bleed dark hero, video covers */

  /* ---------- COLOR — Ink ---------- */
  --ink:        #1A1A1A;  /* primary text, near-black */
  --ink-2:      #3A3A3A;  /* secondary copy */
  --ink-muted:  #6E6E6E;  /* captions, meta, dividers in text */
  --ink-faint:  #A39E92;  /* very low-emphasis, on cream */

  /* ---------- COLOR — Lines ---------- */
  --line:        #D9D3C4;  /* warm hairline on cream */
  --line-strong: #1A1A1A;  /* underline-on-active, divider on dark */
  --line-soft:   rgba(26,26,26,0.08);

  /* ---------- COLOR — Brand accents (used SPARINGLY) ---------- */
  --sp-red:    #C8102E;   /* the snow peak asterisk red, "NEW" labels */
  --olive:     #5C5E3F;   /* outdoor / nature accent — botanical green-khaki */
  --rust:      #8C4A2B;   /* warm earth — seasonal accent */
  --sand:      #C8B89A;   /* warm beige — supporting tonal */

  /* ---------- TYPOGRAPHY — Families ---------- */
  --font-kr:      "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-latin:   "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPOGRAPHY — Weights ---------- */
  --fw-thin:     200;
  --fw-light:    300;   /* DEFAULT body weight — light-driven system */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING (4-base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0px;     /* DEFAULT — Snow Peak is square. Hard edges. */
  --r-sm:   2px;     /* tiny inputs only */
  --r-pill: 9999px;  /* category chips, occasionally */

  /* ---------- ELEVATION ---------- */
  --shadow-soft: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-lift: 0 6px 24px rgba(26,26,26,0.08);

  /* ---------- LAYOUT ---------- */
  --container-max: 1600px;       /* wider than retail standard — hero is the brand */
  --container-pad: 32px;
  --container-pad-mobile: 20px;
  --header-h: 72px;

  /* ---------- MOTION ---------- */
  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 800ms;
}

/* ============================================================
   SEMANTIC TYPE
   Light-driven scale. Latin numerals and English in Inter,
   Korean automatically picks up Pretendard via the stack.
   ============================================================ */

.h-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-thin);
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);   /* 40 → 88 */
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(1.875rem, 3.6vw, 2.75rem); /* 30 → 44 */
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 1.5rem;       /* 24 */
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: 1.125rem;     /* 18 — product names */
  line-height: 1.35;
}

.lead {
  font-family: var(--font-kr);
  font-weight: var(--fw-light);
  font-size: 1rem;         /* 16 */
  line-height: 1.7;        /* generous — Korean rendering needs air */
  color: var(--ink-2);
}

.body {
  font-family: var(--font-kr);
  font-weight: var(--fw-light);
  font-size: 0.9375rem;    /* 15 */
  line-height: 1.65;
  color: var(--ink-2);
}

.caption {
  font-family: var(--font-kr);
  font-weight: var(--fw-regular);
  font-size: 0.8125rem;    /* 13 */
  line-height: 1.5;
  color: var(--ink-muted);
}

/* The signature tracked-mono eyebrow — used for section IDs:
   "01 — OUTDOOR LIFE VALUE", "SS26 / V"  */
.eyebrow {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Price — Latin numerals, light weight, no monospace tabular feel */
.price {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Nav link — small, well-tracked, no uppercase */
.nav-link {
  font-family: var(--font-kr);
  font-weight: var(--fw-regular);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* CTA label — uppercase but light. NEVER bold-and-tracked-loud. */
.cta {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============================================================
   THE ASTERISK ＊
   Snow Peak's signature glyph (U+FF0A FULLWIDTH ASTERISK).
   Used as a brand-mark, separator, and decorative full-stop.
   ============================================================ */
.asterisk {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  display: inline-block;
  line-height: 1;
  color: var(--ink);
}
.asterisk--red { color: var(--sp-red); }

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}