/* Design tokens — the only place raw values live. Components use var(--*). */

:root {
  /* Palette */
  --gray-0: #ffffff;
  --gray-100: #f1f1f1;
  --gray-200: #e4e4e4;
  --gray-600: #666666;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --gray-1000: #000000;
  --blue-500: #21759b;
  --blue-400: #337ab7;
  --blue-300: #5ba4d4;

  /* Semantic — light (default) */
  --bg: var(--gray-0);
  --surface-muted: var(--gray-100);
  --text-1: var(--gray-900);
  --text-2: var(--gray-800);
  --text-3: var(--gray-600);
  --border: var(--gray-200);
  --border-strong: var(--gray-900);
  --link: var(--blue-500);
  --accent-hover: var(--blue-400);
  --focus-ring: var(--blue-400);
  color-scheme: light;

  /* Typography */
  --font-sans: 'Open Sans', 'Noto Sans KR', sans-serif;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 19.5px;
  --fs-xl: 23px;
  --fs-2xl: 36px;
  --fs-display: clamp(36px, 6vw, 72px);
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-base: 1.6;
  --lh-tight: 1.2;
  --ls-tight: -0.02em;
  --ls-caps: 0.08em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 30px;
  --space-7: 40px;
  --space-section: clamp(64px, 10vw, 140px);

  /* Layout */
  --page-px: clamp(20px, 5vw, 60px);
  --page-max: 1280px;
  --article-max: 860px;
  --header-h: 64px;

  /* Shape & motion */
  --radius: 4px;
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --ease: ease;
  --ease-out: cubic-bezier(0.2, 0.7, 0, 1); /* sharp, decelerating */
  --dur-reveal: 900ms;
}

[data-theme="dark"] {
  --bg: #1A1A19;           /* 하우스와 통일 (clue-agent 의견 · 3design 09-29) */
  --surface-muted: #262624;   /* 바탕(#1A1A19)보다 한 단 밝게 — 서비스 띠·빈 칸이 구분되게 (Rey 09-29) */
  --text-1: #ffffff;
  --text-2: #d9d9d9;
  --text-3: #9a9a9a;
  --border: #33322F;
  --border-strong: #ffffff;
  --link: var(--blue-300);
  --accent-hover: #7fb9e0;
  --focus-ring: #7fb9e0;
  color-scheme: dark;
}