/* SeoulPick design tokens — shared by the app (index.html) and the static place pages (pages.css).
   Source of truth: docs/design/design-guide.md. Fonts are loaded with one <link> in each HTML head. */
:root {
  /* Ink & surfaces */
  --ink: #203747;
  --ink-deep: #132633;
  --ink-2: #2c4655;
  --ink-line: #506c76;
  --paper: #fffaf0;
  --surface: #fffefb;
  --bg-app: #eef1ec;
  --bg-start: #e4efe9;
  --dots: #b4cbc150;
  --model-bg: #eeede7;

  /* Text */
  --muted: #526879;
  --muted-2: #5c6f66;
  --on-ink: #fffaf0;
  --on-ink-muted: #c0cdd0;
  --on-ink-line: #8a9da7;
  --nav-ink: #c4d8d5;

  /* Accents */
  --yellow: #ffcb60;
  --yellow-soft: #ffe09a;
  --accent: #d95834;
  --accent-text: #b84a2a;
  --story: #866630;
  --story-bg: #fff1ce;
  --story-icon: #b58b3c;
  --tip-bg: #f2f5ea;
  --tip-line: #c8d5b9;
  --tip-ink: #48634d;

  /* Lines */
  --line: #dce4d7;
  --rule: #d8dfd9;

  /* Overlay & focus */
  --scrim: #102935bd;
  --focus: #203747;
  --focus-on-ink: #fffaf0;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* Shadows (hard, no blur) */
  --shadow-press: 0 4px 0 var(--ink);
  --shadow-press-sm: 0 3px 0 var(--ink);

  /* Type */
  --font-display: 'Jua', 'Noto Sans KR', sans-serif;
  --display-weight: 400;
  --font-body: 'Noto Sans KR', -apple-system, sans-serif;
  --fs-display: 40px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 22px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --lh-heading: 1.25;
  --lh-body: 1.8;
}

/* Korean, Chinese and Japanese use one bold body face for every display role (Korean matched to zh/ja on 2026-10-06 at the operator's request). */
html[lang=ko],
html[lang=ja],
html[lang=zh-Hans] {
  --font-display: 'Noto Sans KR', system-ui, sans-serif;
  --display-weight: 700;
}