/* ============================================================
   차곡차곡 (ChagogChagog) — Foundations
   Source of truth: hongwoogi/chagogchagog (Mantine theme.js + global.css)
   ============================================================ */

/* ---------- Pretendard (Korean-first sans, all weights) ---------- */
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ---------- EliceDigitalBaeum (logo / display only) ---------- */
@font-face { font-family: 'AliceDigitalLearning'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_elice@1.0/EliceDigitalBaeum-Bd.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* ============ TYPE FAMILIES ============ */
  --font-sans:    'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'AliceDigitalLearning', 'Pretendard', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============ TYPE SCALE ============ */
  --fs-xs: 10px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
  --fs-h3: 24px; --fs-h2: 32px; --fs-h1: 44px;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.7;

  /* ============ BRAND — Deep Teal (10-step) ============ */
  --brand-0: #edf4f2; --brand-1: #ddeae6; --brand-2: #bbd5cd; --brand-3: #95beb2;
  --brand-4: #73ab9c; --brand-5: #5e9f8f; --brand-6: #4d8678; --brand-7: #3e6a60;
  --brand-8: #2b4d46; --brand-9: #16423c;

  /* ============ NEUTRALS (light product) ============ */
  --bg-page: #ebeceb; --bg-surface: #ffffff; --bg-muted: #f5f7f6; --bg-subtle: #f8f9fa; --bg-tint: #fdfdfd;
  --fg-1: #1a1d1c; --fg-2: #495057; --fg-3: #868e96; --fg-4: #adb5bd;
  --border-1: #e9ecef; --border-2: #dee2e6; --border-3: #ced4da;

  /* ============ SEMANTIC ============ */
  --color-success: #2f9e44; --color-success-bg: #ebfbee;
  --color-warning: #f08c00; --color-warning-bg: #fff4e6;
  --color-danger: #e03131; --color-danger-bg: #ffe3e3;
  --color-info: #1971c2; --color-info-bg: #e7f5ff;

  /* ============ MARKETING ACCENT (logo gradient) ============ */
  --logo-grad-start: #d946ef; --logo-grad-mid: #a855f7; --logo-grad-end: #6366f1;
  --logo-gradient: linear-gradient(135deg, var(--logo-grad-start) 0%, var(--logo-grad-mid) 50%, var(--logo-grad-end) 100%);

  /* ============ SPACING ============ */
  --sp-xs: 10px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 20px; --sp-xl: 32px; --sp-2xl: 48px;

  /* ============ RADII ============ */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 32px; --r-pill: 999px;

  /* ============ ELEVATION ============ */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.10);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.05), 0 19px 19px -5px rgba(0,0,0,0.05), 0 8px 18px -7px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 25px rgba(0,0,0,0.08);
  --shadow-brand: 0 4px 20px rgba(22, 66, 60, 0.08);
}