/* Golden Chopstix — design system tokens. Nothing on the page is hand-placed. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* fluid root: 16px @360 -> 19px @1440 */
  font-size: clamp(1rem, 0.93rem + 0.31vw, 1.1875rem);

  /* families */
  --font-display: "Fraunces", "Georgia", serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --font-kr: "Archivo", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* spacing — 4-based, 16 heartbeat */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 224px;

  /* type scale — 1.25 major third */
  --ms-0: 1rem;      --ms-1: 1.25rem;   --ms-2: 1.563rem;  --ms-3: 1.953rem;
  --ms-4: 2.441rem;  --ms-5: 3.052rem;  --ms-6: 3.815rem;  --ms-7: 4.768rem;
  --ms-8: 5.96rem;
  --ms-dn1: 0.8rem;  --ms-dn2: 0.64rem;

  /* layout */
  --edge: clamp(1rem, 0.6rem + 1.1vw, 1.5rem);
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --measure: 62ch;
  --shell: min(100% - 2 * var(--edge), 78rem);
  --section-y: clamp(4rem, 2.6rem + 5.5vw, 8.5rem);

  /* radius */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px;
  --r-pill: 999px; --r-full: 50%;

  /* --- color: sampled from the real Golden Chopstix mark --- */
  --paper: #f5f1e8;
  --paper-2: #ece4d5;
  --paper-3: #e2d8c6;
  --ink: #23110a;
  --ink-2: #3d251a;
  --ink-muted: #6c5a4d;
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2: color-mix(in srgb, var(--ink) 20%, transparent);

  --accent: #cf3a20;        /* their red = heat */
  --accent-press: #ae2f16;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ink: #fdf3ec;
  --gold: #f2b134;          /* their gold = the flourish */
  --gold-deep: #d9922a;

  /* char/ember dark surface (the flame lives here) */
  --char: #1a0e08;
  --char-2: #271409;
  --char-3: #38200f;
  --on-char: #f4ece0;
  --on-char-muted: #cbb4a2;
  --ember: 207, 58, 32;     /* rgb for glows */

  /* elevation — one light source, ink-tinted */
  --e0: none;
  --e1: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 8%, transparent);
  --e2: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent), 0 4px 10px color-mix(in srgb, var(--ink) 10%, transparent);
  --e3: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent), 0 14px 24px color-mix(in srgb, var(--ink) 12%, transparent);
  --e4: 0 2px 3px color-mix(in srgb, var(--ink) 16%, transparent), 0 28px 50px color-mix(in srgb, var(--ink) 22%, transparent);

  /* motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-micro: 120ms; --dur-element: 200ms; --dur-section: 320ms; --dur-cinematic: 600ms;
  --stagger: 75ms;
  --focus: 2px solid var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-text);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }