/*
 * Design tokens. The ONLY file allowed to contain color literals.
 * Light theme only (no dark mode by spec).
 */

/* Self-hosted, cut to the site's characters by scripts/fonts.js. */
@font-face {
  font-family: "Danji Sans"; /* Pretendard Variable subset (OFL, renamed) */
  src: url("/fonts/DanjiSans-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif KR Hero"; /* hero title glyphs only */
  src: url("/fonts/NotoSerifKR-500-hero.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg: #FBF8F2;          /* cream background */
  --color-ink: #1F1D1A;         /* text */
  --color-muted: #7A746B;       /* secondary text */
  --color-line: #E8E2D8;        /* hairlines, borders */
  --color-accent: #C8553D;      /* terracotta: button fills, dots */
  --color-accent-green: #2F6B5A; /* deep green: anchak family */
  --color-on-accent: #FFFFFF;   /* text on accent buttons */
  --color-bg-veil: rgba(251, 248, 242, 0.9); /* nav bar on scroll (cream 90%) */
  --color-placeholder: #E8E2D8; /* grey placeholder for missing assets */
  --shadow-soft: 0 24px 60px rgba(31, 29, 26, 0.08);

  /* Type */
  --font-sans: "Danji Sans", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR Hero", "Noto Serif KR", serif;
  --weight-body: 400;
  --weight-serif: 500;
  --weight-title: 700;
  --weight-button: 700;
  --tracking-title: -0.02em;
  --fs-h1: clamp(40px, 7vw, 88px);
  --fs-h2: clamp(32px, 5vw, 60px);
  --fs-sub: clamp(16px, 1.6vw, 20px);
  --fs-small: 14px;
  --fs-button: 19px; /* >= 18.66px bold = "large text", so white on terracotta passes contrast */

  /* Layout */
  --nav-height: 56px;
  --page-max: 720px;
  --gutter: 16px;
  --button-height: 48px;
  --button-width: 264px;
  --radius-pill: 999px;

  /* Motion */
  --dur-section: 400ms;
  --dur-hero: 600ms;
  --rise: 24px;
  --nav-blur: 12px;
}