/* Design tokens — "clinical ledger": กระดาษอุ่น + หมึกเขียวเข้ม, สีใช้ความหมายทางคลินิก */
:root {
  --c-paper: #f5f2ea;
  --c-surface: #fffdf8;
  --c-surface-2: #efebe1;
  --c-line: #ddd6c7;
  --c-line-strong: #8a826e; /* ขอบสิ่งที่กดได้/ช่องกรอก ≥3:1 (WCAG non-text) */
  --c-line-mid: #bfb6a3;    /* เส้นแบ่งที่ไม่ใช่ขอบ control */
  --c-ink: #1b2a2c;
  --c-ink-2: #4a5a5c;
  --c-ink-3: #5a6667;       /* ≥4.5:1 บน paper/surface/surface-2 */
  --c-primary: #0e5b57;
  --c-primary-ink: #fffdf8;
  --c-primary-soft: #d8ebe7;
  --c-accent: #c77a06;
  --c-accent-soft: #fbead0;
  --c-accent-ink: #8a5300;  /* ตัวอักษรอำพันบนพื้นอ่อน ≥5:1 */
  --c-focus: #8a5300;       /* วงโฟกัส ≥4.5:1 ทุกพื้น */
  --c-ok: #256b41;
  --c-on-status: #fff; /* ตัวอักษรบนพื้นสีสถานะ (ok/bad) — โหมดมืดพื้นสว่าง จึงใช้หมึกเข้ม */
  --c-ok-soft: #dcefe2;
  --c-warn: #8f5a08;
  --c-warn-soft: #f8e9c9;
  --c-bad: #b0281f;
  --c-bad-soft: #f6dcd8;
  --c-info: #2a5c9e;
  --c-info-soft: #dde7f5;
  --c-muted-soft: #e9e5dc;
  --c-nav: #12302f;
  --c-nav-ink: #d8e6e3;
  --c-nav-active: #f2b544;

  --f-ui: 'IBM Plex Sans Thai', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-doc: 'Sarabun', 'IBM Plex Sans Thai', sans-serif;

  --t-xs: 0.875rem;   /* 14px — ขนาดต่ำสุดของข้อความใด ๆ */
  --t-sm: 1rem;       /* 16px — ข้อความทำงาน: ปุ่ม ตาราง ป้ายชื่อช่อง */
  --t-base: 1.0625rem; /* 17px */
  --t-lg: 1.1875rem;  /* 19px */
  --t-input: 1rem;    /* 16px — ไม่ให้ iOS ซูมเมื่อแตะช่องกรอก */
  --hit: 44px;        /* เป้าแตะขั้นต่ำบนจอสัมผัส */
  --t-xl: 1.5rem;
  --t-kpi: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --t-hero: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --sh-1: 0 1px 0 rgba(27, 42, 44, .06), 0 1px 3px rgba(27, 42, 44, .06);
  --sh-2: 0 8px 28px -12px rgba(27, 42, 44, .28);
  --sh-3: 0 24px 60px -20px rgba(27, 42, 44, .45);

  --dur-fast: 140ms;
  --dur: 240ms;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --viz-good: #2d7a4c; --viz-warn: #c9a227; --viz-bad: #b0281f;
  --seq-1: #d6ece8; --seq-2: #97cfc4; --seq-3: #50a89b; --seq-4: #1d7a70; --seq-5: #0b4540;
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --viz-grid: rgba(27, 42, 44, .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper: #111a1b;
    --c-surface: #172224;
    --c-surface-2: #1d2a2c;
    --c-line: #2b3b3d;
    --c-line-strong: #6d8285;
    --c-ink: #e8eeec;
    --c-ink-2: #aebdbb;
    --c-ink-3: #93a3a1;
    --c-primary: #4cb3a8;
    --c-primary-ink: #0b1414;
    --c-primary-soft: #183a37;
    --c-accent: #f0a93a;
    --c-accent-soft: #3a2b12;
    --c-accent-ink: #f0a93a;
    --c-focus: #f0a93a;
    --c-line-mid: #2b3b3d;
    --c-ok: #5cc184;
    --c-on-status: #0b1414;
    --c-ok-soft: #173424;
    --c-warn: #e5a93f;
    --c-warn-soft: #362914;
    --c-bad: #f48a80;
    --c-bad-soft: #3d1c19;
    --c-info: #7fa8e6;
    --c-info-soft: #1b2a40;
    --c-muted-soft: #243133;
    --c-nav: #0b1415;
    --viz-good: #5cc184; --viz-warn: #e0b43a; --viz-bad: #f0776c;
    --seq-1: #1f3b38; --seq-2: #2b6b63; --seq-3: #3f9a8e; --seq-4: #6cc3b6; --seq-5: #b5e6de;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --viz-grid: rgba(232, 238, 236, .08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c-paper: #111a1b; --c-surface: #172224; --c-surface-2: #1d2a2c; --c-line: #2b3b3d; --c-line-strong: #6d8285;
  --c-ink: #e8eeec; --c-ink-2: #aebdbb; --c-ink-3: #93a3a1; --c-primary: #4cb3a8; --c-primary-ink: #0b1414;
  --c-primary-soft: #183a37; --c-accent: #f0a93a; --c-accent-soft: #3a2b12; --c-accent-ink: #f0a93a; --c-focus: #f0a93a; --c-line-mid: #2b3b3d; --c-ok: #5cc184; --c-ok-soft: #173424; --c-on-status: #0b1414;
  --c-warn: #e5a93f; --c-warn-soft: #362914; --c-bad: #f48a80; --c-bad-soft: #3d1c19; --c-info: #7fa8e6;
  --c-info-soft: #1b2a40; --c-muted-soft: #243133; --c-nav: #0b1415; --viz-good: #5cc184; --viz-warn: #e0b43a; --viz-bad: #f0776c; --seq-1: #1f3b38; --seq-2: #2b6b63; --seq-3: #3f9a8e; --seq-4: #6cc3b6; --seq-5: #b5e6de; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --viz-grid: rgba(232, 238, 236, .08); color-scheme: dark;
}