/* ==========================================================================
   DESIGNPACA DESIGN TOKENS — SUWON ALPACA EDITORIAL-POP ZINE EDITION
   Refined 2026-09-13: kitsch toned down for readability + mobile.
   ========================================================================== */

:root {
  /* --- Safe areas (must live in :root or env() silently dies) --- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* --- Brand & Palette (Neo-Kitsch Pop Palette) --- */
  --ink: #1b1a17;
  --ink-rgb: 27, 26, 23;
  --paper: #fff8eb;
  --paper-card: #fffdf7;
  --paper-cream: #fbf5e6;
  --paper-tint: #f6efe0;

  /* Accent Kitsch Pop Colors */
  --butter: #ffe66d;
  --butter-rgb: 255, 230, 109;
  --coral: #ff5e36;
  --coral-rgb: 255, 94, 54;
  /* Text-safe coral: passes 4.5:1 on butter/paper/cream (coral itself does not) */
  --coral-deep: #b8350f;
  --orange: #ff7a3d;
  --pink: #ff85a1;
  --pink-rgb: 255, 133, 161;
  --pink-soft: #ffe2e8;
  --mint: #52de97;
  --mint-rgb: 82, 222, 151;
  --mint-soft: #ddf7ea;
  --lavender: #d6c7ff;
  --lavender-soft: #f2edff;
  --sky: #90dbf4;
  --sky-soft: #e1f5fe;
  --coffee: #5a3e2b;

  /* Semantics */
  --color-primary: var(--coral);
  --color-accent: var(--butter);
  --color-surface: var(--paper-card);
  --color-bg: var(--paper);
  --color-border: var(--ink);

  /* --- Typography Scales (Fluid Clamp with Safety Fallbacks) --- */
  --font-display: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'DM Serif Display', 'Noto Serif KR', Georgia, serif;
  --font-script: 'Pacifico', cursive;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.92rem);
  --step-0: clamp(0.98rem, 0.95rem + 0.18vw, 1.06rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.3vw, 1.28rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.55vw, 1.68rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  /* h2 — kept clearly below h1 at every width (see design.md 3단계) */
  --step-4: clamp(1.55rem, 1.15rem + 1.9vw, 3.2rem);
  /* h1 / display — mobile lands ~34px (Monocle·식신 실측 32~34px 대) */
  --step-5: clamp(2.15rem, 1.45rem + 3.1vw, 4.3rem);
  --step-6: clamp(2.6rem, 1.6rem + 4.4vw, 5.4rem);

  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.7;   /* 한글 본문 기준 */
  --measure: 34rem;        /* 한글 25~40자 읽기 폭 */
  --measure-narrow: 26rem;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-strong: 700;

  /* --- Spacing System --- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.32rem);
  --space-2xs: clamp(0.45rem, 0.42rem + 0.15vw, 0.55rem);
  --space-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
  --space-sm: clamp(0.95rem, 0.88rem + 0.35vw, 1.15rem);
  --space-md: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --space-lg: clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --space-xl: clamp(2.5rem, 2.2rem + 1.5vw, 3.4rem);
  --space-2xl: clamp(3.5rem, 3rem + 2.5vw, 5rem);
  --gutter: clamp(1rem, 0.55rem + 2.2vw, 3.5rem);

  /* --- Control dimensions (one source for every button-like thing) --- */
  --control-h: 2.75rem;
  --control-h-sm: 2.25rem;
  --control-pad-x: var(--space-sm);

  /* --- Borders & Strokes --- */
  --line-thin: 1px solid rgba(27, 26, 23, 0.2);
  --line-base: 2px solid var(--ink);
  --line-thick: 3px solid var(--ink);
  --line-heavy: 4px solid var(--ink);

  /* --- Editorial-pop strokes (offset halved from the kitsch original) --- */
  --shadow-xs: 1.5px 1.5px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-md: 3px 3px 0 var(--ink);
  --shadow-lg: 4px 4px 0 var(--ink);
  --shadow-pop: 3px 3px 0 var(--coral);
  --shadow-butter: 3px 3px 0 var(--butter);
  --shadow-mint: 3px 3px 0 var(--mint);
  --shadow-floating: 0 16px 32px rgba(27, 26, 23, 0.18), 0 4px 0 var(--ink);

  /* --- Radius --- */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 9999px;

  /* --- Motion & Timing --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 260ms;
  --duration-slow: 450ms;
}