/* Design tokens — palette from docs/reference/prototype.html.

   One light palette (ADR-0016 decision 10, 2026-10-13): no dark or high-contrast palette and
   no theme or contrast choice. The operating system's forced-colors mode (Windows contrast
   themes) is honoured by the browser: see the forced-colors sections in site.css and the
   app stylesheets. <meta name="theme-color"> equals --bg (apps/core/preferences.py
   THEME_COLOR; server/tests/test_light_only.py keeps them in sync).

   Accessibility corrections vs. the prototype (WCAG 2.2 AA, measured):
     --muted   #6B786E → #5E6B61 (prototype 4.18:1 on --bg, 3.83:1 on --sunk; now ≥ 4.63:1)
     --focus   new: the prototype's yellow focus ring was ~1.6:1 on the light background
     --on-deep-accent new: accent text on --deep (the footer)
     --line-strong new: --line is decorative (1.3:1); control boundaries need 3:1 (WCAG 1.4.11)
     --danger/--on-danger new: one destructive colour (≥4.5:1 both ways)
     --glass   .72 → .9 opaque: header text (--ink-2 and up) stays ≥4.5:1 over any content
               scrolled under the floating bar, worst case solid black or white (RD-10)
   Type (RD-06): UI text (--sans) uses the system Korean sans-serif, so no sans web font is
   downloaded and nothing swaps. The serif (Noto Serif KR, titles and reading text) and the
   Latin display face (Cormorant Garamond) are self-hosted, one generated sheet per family
   (css/fonts-serif.css, css/fonts-display.css; tools/fonts/build.py, CSP font-src 'self'),
   with metric-matched local fallbacks. */

/* ── Light (the only palette) ── */
:root{
  color-scheme:light;
  --bg:#F2F4EE; --surface:#FFFFFF; --sunk:#E7EBE2; --glass:rgba(255,255,255,.9);
  --ink:#121C16; --ink-2:#3E4C43; --muted:#5E6B61; --line:#D3D9CC;
  --line-strong:#76837A; /* control borders (inputs, ghost buttons): ≥3:1 on --bg/--surface/--sunk (WCAG 1.4.11) */
  --danger:#B3261E; --on-danger:#FFFFFF; /* destructive actions (.btn.danger) */
  --deep:#1F3A2C; --deep-2:#284636; --on-deep:#F1F4EC; --on-deep-2:#A9B8AC;
  --yellow:#F7C719; --yellow-ink:#6B4F00; --yellow-soft:#FFF1BD; --on-yellow:#121C16;
  --on-deep-accent:#F7C719; /* accent text on --deep (footer site name, staff link, hovers) */
  --leaf:#2A6A4A; --leaf-soft:#D8EADF; --on-leaf:#FFFFFF;
  --focus:#6B4F00;
  --c-poem:#F7C719; --c-novel:#9CC6F2; --c-verse:#F4A9C0; --c-essay:#9ED7B2; --c-etc:#C8B6F2;
  --c-orange:#F2A65A; /* magazine cover colour (prototype ISSUES 7월호); text on it stays --on-yellow */
  --c-memoir:var(--c-orange); /* 수기 (Genre.color_key memoir, 2026-10-20): the palette's orange */
  /* Hero illustration (decorative, aria-hidden): the prototype image's bright leaves and lemon
     flowers. Never text colours: --leaf / --yellow stay the UI tokens. */
  --art-leaf:#49B24D; --art-leaf-2:color-mix(in srgb,#49B24D 72%,#FFFFFF); --art-flower:#FDF053; --art-flower-in:color-mix(in srgb,#FDF053 62%,#FFFFFF);
  /* Web fonts and their metric-matched local fallbacks: css/fonts-*.css (MP-05). After the
     serif fallback face (Batang, scaled) comes Noto Serif CJK KR by name: it already has the
     web font's metrics (tools/fonts/build.py FALLBACKS), so it needs no override face.
     --sans is system fonts only: Apple SD Gothic Neo (macOS, iOS), Malgun Gothic (Windows),
     Noto Sans KR / Noto Sans CJK KR where installed (Linux, ChromeOS), then the platform's
     UI font (Android: Roboto with Noto Sans CJK for Hangul). Korean faces come first so
     Latin letters in Korean sentences use the same face's Latin. */
  --serif:"Noto Serif KR","Noto Serif KR Fallback","Noto Serif CJK KR",serif;
  --read:"Noto Serif KR","Noto Serif KR Fallback","Noto Serif CJK KR",serif;
  --sans:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Noto Sans CJK KR",system-ui,sans-serif;
  --mono:"Cormorant Garamond","Cormorant Garamond Fallback","Noto Serif KR","Noto Serif KR Fallback","Noto Serif CJK KR",serif;
  --dl:color-mix(in srgb,var(--ink) 18%,transparent);
  --hero-bg:linear-gradient(168deg,#FFF7DA 0%,#FCFBF3 42%,#EAF4EC 100%);
  --soft-bg:linear-gradient(150deg,#EEF6EF,#FFF8E1);
  --shadow:rgba(8,24,16,.45);
  --glow-1:rgba(247,199,25,.30); --glow-2:rgba(158,215,178,.45); /* hero background glows */
  --ease-out:cubic-bezier(.23,1,.32,1); /* UI enter/press easing (short, responsive); apps use this, never their own curve */
  /* Motion durations (VP4-18): a press, a small UI change (hover, colour, menu), a panel or dialog. */
  --dur-press:120ms; --dur-ui:160ms; --dur-panel:200ms;
  /* Highlighter band behind the hero's key word (VP4-02). */
  --mark:rgba(247,199,25,.55);
  --r:24px;
  /* Reading text (prose, the work body, quotes): the prototype's light 300, measured ≥7:1
     (AAA) for --ink and --ink-2 on every surface. The largest text size uses 400
     (RD-08; server/tests/test_theme_tokens.py). */
  --prose-weight:300;
  --target-min:44px; /* pointer target floor (WCAG 2.5.8 AA = 24px; KWCAG 6.1.3, HIG 44pt) */
  /* The reading column of every text page (협회 안내·인사말·연혁·조직도, 공지, 법적 문서, a
     월간지 글 and its 이전·다음 글 and 인쇄본 글로 읽기): 46 times the prose size, about 50 Hangul
     syllables a line (795px at 16px text), centred. One value, so no page's text is wider than
     its neighbour's (a 월간지 글 was 832px beside the others' 795px). */
  --read-w:calc(46 * 1.08rem);
  --hh:88px; /* the floating header's height; see "Header height" below */
}

/* ── Text size preference (preferences FontScale) ── */
:root[data-font-scale="large"]{font-size:115%}
:root[data-font-scale="xlarge"]{font-size:130%} /* the largest of three steps (ADR-0017 decision 11) */
:root[data-font-scale$="xlarge"]{--prose-weight:400} /* see --prose-weight */

/* ── Header height (--hh) ──
   The hero, the page head and the messages slide under the floating header by this much
   (site.css), so the value must be right in the FIRST frame: from a wrong one the band under
   the header moved a few px when site.js measured the real height. Measuring it while the
   page was parsed forced a whole layout before the stylesheets had arrived (129 ms of
   forced reflow in Lighthouse), so these are the measured heights of the common cases
   (Chromium, Windows, 2026-10-20; server/apps/core/tests/test_page_weight_browser.py keeps
   them true from 360px to 1440px). The bar is one row from 1081px up at the normal size (87px
   at every width), from 1160px at the large size and from 1239px at the largest. Everything
   else (the menu wrapping to two rows below those widths, a 320px phone) is corrected by
   site.js, which re-measures the header at DOMContentLoaded and whenever it changes size. */
@media (min-width:1081px){:root{--hh:87px}}
:root[data-font-scale="large"]{--hh:92px}
@media (min-width:1200px){:root[data-font-scale="large"]{--hh:91px}}
:root[data-font-scale="xlarge"]{--hh:97px}