/* IDenmax design tokens — docs/design/ui-design-system.md is the source of truth.
   Same file in two places (kept identical):
     http/ui/dist/portal-assets/tokens.css  (end-user pages, served at /portal-assets/)
     internal/control/ui/tokens.css         (control plane, served at /)
   Font URLs are relative so they resolve next to this file in both places.
   Fonts: IBM Plex Sans Thai + IBM Plex Mono, SIL OFL 1.1 (see fonts/OFL.txt). Self-hosted: no runtime CDN. */

@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- light (default) ---------- */
:root {
  color-scheme: light;
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #EEF2F7;
  --border: #D3DBE6;
  --border-strong: #8A99AE;
  --text: #0B1526;
  --text-muted: #4A5568;
  /* org branding (accent_color) sets --brand-* from JS; it overrides primary in the light theme only,
     because an arbitrary org colour cannot be guaranteed to reach 4.5:1 on the dark surfaces */
  --primary: var(--brand-primary, #0B5394);
  --primary-hover: var(--brand-primary-hover, #08427A);
  --on-primary: var(--brand-on-primary, #FFFFFF);
  --primary-soft: #E6EFF8;
  --success: #0F7B4F;
  --success-soft: #E3F4EC;
  --warning: #8A5300;
  --warning-soft: #FFF3D6;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --info: #0B5394;
  --focus: #1F6FEB;
  --navy: #0A1F3A;
  --on-navy: #E8EEF6;
  --on-navy-muted: #A9B8CC;
  /* brand mark: navy shield + light-blue check (readable on the navy fill) */
  --mark-shield: #0A1F3A;
  --mark-check: #7AB4F5;
  /* on the navy band (same in both themes) */
  --on-navy-focus: #9CC7FF;
  --on-navy-accent: #7AB4F5;
  --on-navy-hover: rgba(255,255,255,.08);
  --on-navy-border: rgba(232,238,246,.28);
  --mark-shield-on-navy: #1E3A5F;

  --font-sans: "IBM Plex Sans Thai", "Leelawadee UI", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-caption: .75rem; --fs-dense: .875rem; --fs-body: 1rem; --fs-lead: 1.125rem;
  --fs-h3: 1.25rem; --fs-h2: 1.5rem; --fs-h1: 1.875rem;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(10,31,58,.06), 0 1px 1px rgba(10,31,58,.04);
  --shadow-2: 0 4px 12px rgba(10,31,58,.08);
  --shadow-3: 0 12px 32px rgba(10,31,58,.16);
  --z-sticky: 10; --z-dropdown: 20; --z-header: 40; --z-drawer: 60; --z-modal: 100; --z-toast: 1000;
  --ease-enter: cubic-bezier(.2,0,0,1); --ease-exit: cubic-bezier(.4,0,1,1);
  --dur-micro: 120ms; --dur-enter: 200ms; --dur-exit: 150ms;
  --touch: 44px;
}

/* ---------- dark: OS preference unless the viewer chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B1220; --surface: #111A2B; --surface-2: #17233A; --border: #2A3A55; --border-strong: #4A5D7C;
    --text: #E6EBF2; --text-muted: #A7B4C8;
    --primary: #7AB4F5; --primary-hover: #A3CBF8; --on-primary: #0B1220; --primary-soft: #16304F;
    --success: #4CC38A; --success-soft: #123527; --warning: #F5B544; --warning-soft: #3A2A0B;
    --danger: #F87171; --danger-soft: #3D1717; --info: #7AB4F5; --focus: #9CC7FF;
    --navy: #060D19; --on-navy: #E8EEF6; --on-navy-muted: #93A3BA;
    --mark-shield: #1E3A5F; --mark-check: #9CC7FF;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
  }
}
/* ---------- dark: chosen manually ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220; --surface: #111A2B; --surface-2: #17233A; --border: #2A3A55; --border-strong: #4A5D7C;
  --text: #E6EBF2; --text-muted: #A7B4C8;
  --primary: #7AB4F5; --primary-hover: #A3CBF8; --on-primary: #0B1220; --primary-soft: #16304F;
  --success: #4CC38A; --success-soft: #123527; --warning: #F5B544; --warning-soft: #3A2A0B;
  --danger: #F87171; --danger-soft: #3D1717; --info: #7AB4F5; --focus: #9CC7FF;
  --navy: #060D19; --on-navy: #E8EEF6; --on-navy-muted: #93A3BA;
  --mark-shield: #1E3A5F; --mark-check: #9CC7FF;
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.4; font-weight: 600; margin: 0; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
code, kbd, samp, pre, .mono { font-family: var(--font-mono); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* focus: never removed, always visible on keyboard */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* programmatic focus targets (main, result headings) are not controls: no ring */
[tabindex="-1"]:focus { outline: none; }

/* skip link: off-screen until focused */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-toast);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-3);
  border: 1px solid var(--border-strong);
}
.skip-link:focus, .skip-link:focus-visible { top: var(--sp-3); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* icons: inline SVG, 24 grid, currentColor */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* brand mark */
.mark { width: 32px; height: 32px; flex: none; }
.mark .mark-shield { fill: var(--mark-shield); }
.mark .mark-check { fill: none; stroke: var(--mark-check); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

/* theme toggle swaps sun/moon by theme */
[data-theme-toggle] .i-sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .i-sun { display: inline; }
:root[data-theme="dark"] [data-theme-toggle] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-theme-toggle] .i-sun { display: inline; }
  :root:not([data-theme="light"]) [data-theme-toggle] .i-moon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}