/* CONTTO design system — TOKENS (owner T545: D2 · Forest on ivory). LOCKED: the only file where raw values live.
   A change here is its own reviewed commit (owner-approved). Components (ds2/components.css) and screens read these names only.
   Spec: batches/ui/T537-DESIGN-SYSTEM-SPEC-20261021.md (D2 row). Lint: web/tools/ds_lint.py. */
:root {
  /* spacing — 8-pt scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* type — one Korean sans, 400 / 600 / 700, four levels */
  --font: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --track-tight: -.01em;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --fs-display: 28px; --lh-display: 1.25;
  --fs-title: 18px;   --lh-title: 1.4;
  --fs-body: 15px;    --lh-body: 1.55;
  --fs-caption: 13px; --lh-caption: 1.45;
  --t-display: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font);
  --t-title: var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font);
  --t-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);
  --t-body-strong: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font);
  --t-caption: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font);
  --t-caption-strong: var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font);

  /* color — 1 accent (forest) + the warm ivory ramp + 4 states */
  --accent: #136C4A; --accent-ink: #FFFFFF; --accent-soft: #E4EFE6; --accent-press: #0F5A3D;
  --n0: #FFFDF8; --n1: #FBF8F1; --n2: #F2EDE2; --n3: #E2DACB; --n5: #6E6658; --n7: #3E382F; --n9: #1C1914;
  --ok: #136C4A;     --ok-bg: #E4EFE6;
  --warn: #9A5B00;   --warn-bg: #F7EBD3;
  --danger: #C23A2B; --danger-bg: #F7E3DD;
  --info: #2B5FB8;   --info-bg: #E8EDF7;
  --scrim: rgb(28 25 20 / .44);
  /* the brand MARK only (a brand's own color on its badge) — never an action */
  --mark-yellow: #FFDC52; --mark-ink: #1C1914;

  /* radius — three steps (+ pill) */
  --r1: 8px; --r2: 12px; --r3: 20px; --pill: 999px;

  /* elevation — three steps */
  --e1: 0 1px 2px rgb(28 25 20 / .06);
  --e2: 0 4px 12px rgb(28 25 20 / .08);
  --e3: 0 12px 32px rgb(28 25 20 / .14);

  /* motion — two durations, one easing; motion = state change only */
  --d-fast: 120ms; --d-base: 220ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* hairlines (borders, focus ring) */
  --hair: 1px; --hair2: 2px;

  /* layout */
  --tap: 44px; --tap-s: 36px; --rail-w: 232px; --content-max: 960px; --gutter: var(--s4);
  color-scheme: light;
}
/* dark mode: defined for parity, OFF by default (turned on only by data-theme="dark") */
:root[data-theme="dark"] {
  --accent: #4FB487; --accent-ink: #0E1512; --accent-soft: #1D3328; --accent-press: #63C497;
  --n0: #1E1C18; --n1: #171512; --n2: #26231E; --n3: #36322B; --n5: #A39B8D; --n7: #D6CFC2; --n9: #F6F2EA;
  --ok: #4FB487; --ok-bg: #1D3328; --warn: #E3A64B; --warn-bg: #33281A; --danger: #E9796B; --danger-bg: #3A221E; --info: #7FA7EE; --info-bg: #1E2840;
  --scrim: rgb(0 0 0 / .6);
  --e1: 0 1px 2px rgb(0 0 0 / .4); --e2: 0 4px 12px rgb(0 0 0 / .45); --e3: 0 12px 32px rgb(0 0 0 / .55);
  color-scheme: dark;
}