/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * FINAL MERGE — mockups/final/. Base = redesign-a in full (GOV.UK-school civic-service register,
 *   navy palette, flat/sharp geometry, Long Document macrostructure, N6 masthead nav, Ft2 footer).
 *   Content richness layered in from redesign-b (explanatory inset-notes, 4-group submit form,
 *   3-state score meaning, filter/sort depth) — dressed entirely in A's flat visual language, no
 *   B tokens (soft radius / shadow / tile-grid) carried over. See style.css header for the itemised
 *   "what came from B" list and the 5 owner-requested fixes applied in this merge.
 * genre: modern-minimal (restraint discipline) — bespoke "gov-service" register (explicit brief)
 * macrostructure: Long Document (adapted — content-first document flow, result panel in-flow)
 * theme: custom "ราชการสีน้ำเงิน" (navy gov-service) — tuned OKLCH palette, not a catalog theme
 *   vibe: "ทางการ, น่าเชื่อถือ, แบนเรียบ, GOV.UK-school" · anchor: navy #1a4480 / #0b2545
 * nav: N6 masthead, 2-band (dark navy identity band + flat white utility bar). This merge adds a
 *   right-aligned utility slot in the utility bar ("แจ้งข้อมูลการจัดอบรม/ออกหน่วย") split from the
 *   left-aligned primary 3 links via justify-content:space-between — still N6, not a new archetype.
 * footer: Ft2 inline (stacked lines) · enrichment: none
 * font: Sarabun self-hosted only (offline requirement + full Thai glyph coverage)
 *
 * Contrast — computed (WCAG 2.1 relative luminance via OKLCH→linear-sRGB, not eyeballed; script at
 *   scratchpad/contrast.py this session — see build report for the full pair list):
 *   ink #101828 on paper #fff            17.75:1  (AAA)
 *   ink-2 #33414f on paper #fff          10.45:1  (AAA) · ink-2 on paper-3               9.48:1  (AAA)
 *   muted #5b6b7a on paper #fff           5.48:1  (AA)  · muted on paper-3 (tag--mock/none) 4.98:1 (AA)
 *   accent-strong #1a4480 on paper #fff   9.62:1  (AAA) · accent-strong on paper-3         8.73:1 (AAA)
 *   white text on accent-strong #1a4480   9.62:1  (AAA) — filled button label
 *   white text on header band #0b2545    15.39:1  (AAA) — masthead band
 *   success text #1a6b3c on success-bg #e3f3e9   5.69:1  (AA)  — "คะแนนยืนยันแล้ว" tag
 *   warning text #8a5a00 on warning-bg #fbeecb   5.14:1  (AA)  — "รอพิจารณา" tag
 *   error text   #b3261e on white         6.54:1  (AA)
 *   focus yellow #ffcc00 vs ink #101828  11.74:1 (paired with an ink inset ring — yellow alone
 *     on white paper is only 1.51:1, so the focus style is a double ring: ink ring first, yellow
 *     outline outside it — see .btn:focus-visible etc. in style.css)
 */

/* ---------------------------------------------------------------------
 * Sarabun — self-hosted, local files only (web/fonts/), OFL license.
 * No Google Fonts CDN — must render fully offline.
 * ------------------------------------------------------------------- */
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sarabun";
  src: url("fonts/sarabun-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colour — navy gov-service, near-white paper, cool-neutral greys ---------- */
  --color-paper:        oklch(100%    0      0);
  --color-paper-2:      oklch(99.06%  0.0017 247.8);
  --color-paper-3:      oklch(96.62%  0.0034 247.9);
  --color-rule:         oklch(88.86%  0.0105 247.9);
  --color-rule-2:       oklch(80.38%  0.0173 250.9);

  --color-ink:          oklch(20.99%  0.0341 263.4);   /* #101828 */
  --color-ink-2:        oklch(36.88%  0.0303 248.7);   /* #33414f */
  --color-muted:        oklch(52.00%  0.0307 246.7);   /* #5b6b7a */

  --color-accent:        oklch(48.82% 0.2172 264.4);   /* #1d4ed8 — decorative fill only (progress bar) */
  --color-accent-strong: oklch(39.21% 0.1116 257.9);   /* #1a4480 — links, filled buttons, nav active — AA text */
  --color-accent-ink:    oklch(100%   0      0);        /* text placed on an accent fill */
  --color-header-band:   oklch(26.40% 0.0678 255.3);   /* #0b2545 — masthead identity band */

  /* Focus — GOV.UK-style double ring: ink first, yellow outside (yellow alone fails on white) */
  --color-focus:         oklch(86.52% 0.1768 90.4);    /* #ffcc00 */
  --color-focus-ring:    var(--color-ink);

  /* Semantic — fixed hues, independent of the navy accent */
  --color-success:      oklch(46.79%  0.1074 153.1);   /* #1a6b3c */
  --color-success-bg:   oklch(94.95%  0.0215 158.6);   /* #e3f3e9 */
  --color-warning:      oklch(50.78%  0.1080 73.3);    /* #8a5a00 */
  --color-warning-bg:   oklch(95.05%  0.0477 90.1);    /* #fbeecb */
  --color-warning-ring: oklch(83.31%  0.1176 88.2);    /* #e8c469 */
  --color-error:        oklch(50.13%  0.1783 28.7);    /* #b3261e */
  --color-error-bg:     oklch(94.78%  0.0199 25.2);    /* #fbe9e7 */

  /* ---------- Type — Sarabun only. Compact civic-service scale — smaller than a marketing
     scale on purpose. Base is a true 16px, html left at 100%. ---------- */
  --font-display: "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Sarabun", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;

  --text-2xs:  0.75rem;     /* 12px — legal fine print only */
  --text-xs:   0.8125rem;   /* 13px — chips/meta/tags */
  --text-sm:   0.875rem;    /* 14px — secondary text, nav links */
  --text-base: 1rem;        /* 16px — body */
  --text-dense: 0.9375rem;  /* 15px — table + card copy, per spec (denser than prose body) */
  --text-md:   1rem;        /* 16px, weight 600 — field labels */
  --text-lg:   1.1rem;      /* 17.6px — h2 / section heads, per spec */
  --text-xl:   1.3rem;      /* 20.8px — h1, per spec (~1.25–1.35rem) */
  --text-figure: clamp(1.75rem, 4.5vw, 2.2rem);  /* hero score — capped 2.2rem, per spec */

  /* ---------- Space — 4pt scale, tightened vs a marketing page (denser, civic-service rhythm) ---------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.25rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --page-gutter: clamp(1rem, 4vw, 1.5rem);

  /* ---------- Radius — flat/sharp per brief. Buttons + inputs are 0. Content
     containers get a minimal 4px so text blocks don't feel like cut paper. ---------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   4px;

  /* ---------- Motion — cut to functional only. No page-load stagger/reveal (GOV.UK-school
     pages don't fade in); colour/border transitions on interactive states only. ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 100ms;
  --dur-short: 160ms;
  --dur-long:  260ms;

  /* ---------- Elevation — none. Flat per brief; borders/rules carry all separation. ---------- */

  /* ---------- Z-index ---------- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
}