/* ============================================================================
   Design tokens — single source of truth.
   ทุกค่าสี/ขนาด/เงา/เวลาในโปรเจคต้องมาจากไฟล์นี้ ไฟล์อื่นห้ามมี hex literal
   Scale: 4px / 8px. Desktop-first (1366x768, 1920x1080).
   ========================================================================= */

:root {
  /* surfaces */
  --ui-surface:      #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-header-tint:  #f3f7ff;  /* the header / popup surface gradient end */
  --ui-app-bg:       #f1f3f5;
  --ui-canvas-bg:    #f6f7f9;
  --ui-sunken:       #eef0f3;
  --ui-hover:        #f4f5f7;
  --ui-active:       #e9ebee;

  /* ink */
  --ui-ink:          #0f172a;
  --ui-ink-2:        #334155;
  --ui-muted:        #64748b;
  --ui-faint:        #94a3b8;

  /* lines */
  --ui-line:         #e6e8ec;
  --ui-line-strong:  #d3d8e0;
  --ui-line-2:       #eef0f3;   /* subtle divider, table row rule */

  /* accent — "selected" ในทุกมุมมองต้องเป็นสีเดียวกัน */
  --ui-accent:       #2563eb;
  --ui-accent-ink:   #1d4ed8;
  --ui-accent-soft:  #eff4ff;
  --ui-accent-line:  #c7d9fb;
  --ui-select:       #38bdf8;

  /* summary cards — the neutral tone a card shows before the app paints its
     per-zone data colour inline (workspace.js / earthworks-view.js override
     this variable on every card; zone colours are data and stay out here) */
  --card-zone:       #52677f;

  /* nav chrome — the app bar and the dashboard toolbar share one selected
     state, so a picked zone looks exactly like a picked top-level tab */
  --ui-nav-selected:      #eaf0f7;
  --ui-nav-selected-ink:  #213752;
  --ui-nav-selected-line: #477aa5;

  /* ข้อความบนพื้นที่เต็มสี (accent หรือ ink) ต้องเป็นขาวเสมอ
     ไม่ว่าธีมจะเป็นสว่างหรือมืด */
  --ui-on-accent:    #ffffff;

  /* status */
  --ui-ok:      #16a34a;  --ui-ok-soft:   #f0fdf4;
  --ui-warn:    #d97706;  --ui-warn-soft: #fffbeb;
  --ui-bad:     #e5484d;  --ui-bad-soft:  #fef2f2;

  /* type */
  --ui-font-sans: 'Inter', 'Sarabun', ui-sans-serif, system-ui, sans-serif;
  --ui-font-num:  'Inter', 'Sarabun', ui-sans-serif, system-ui, sans-serif;
  --ui-fs-3:   19px;    /* page title */
  --ui-fs-2:   15px;    /* panel title, brand */
  --ui-fs-1:   13px;    /* body text, control label */
  --ui-fs-0:   12px;    /* dense cell, secondary control */
  --ui-fs--1:  11px;    /* meta, unit, caption */
  --ui-fs--2:  10.5px;  /* eyebrow, section label, footnote */

  /* radius */
  --ui-r-1: 6px; --ui-r-2: 8px; --ui-r-3: 10px; --ui-r-4: 16px;
  --ui-r-pill: 999px; --ui-r-card: 16px;

  /* spacing */
  --ui-s-1: 4px; --ui-s-2: 8px; --ui-s-3: 12px;
  --ui-s-4: 16px; --ui-s-5: 20px; --ui-s-6: 24px;

  /* elevation — การ์ดลอยขึ้นจากพื้น ไม่ใช่เรืองแสง */
  --ui-sh-1: 0 1px 2px rgba(15, 23, 42, .05);
  --ui-sh-2: 0 1px 0 rgba(15, 23, 42, .03), 0 12px 28px -12px rgba(15, 23, 42, .18);
  --ui-sh-3: 0 1px 0 rgba(15, 23, 42, .04), 0 16px 40px -16px rgba(15, 23, 42, .22);
  --ui-sh-card: 0 1px 0 rgba(15, 23, 42, .02), 0 12px 32px -12px rgba(15, 23, 42, .14);
  --ui-sh-pop:  0 16px 48px -16px rgba(15, 23, 42, .28);

  /* metric */
  --ui-h-ctl: 32px;
  --ui-h-ctl-sm: 28px;
  --ui-h-ctl-xs: 24px;
  --ui-h-nav-ctl: 26px;
  --ui-h-top: 56px;
  --ui-h-wsbar: 44px;
  --ui-h-status: 28px;
  --ui-w-nav: 252px;
  --ui-w-nav-mini: 56px;
  /* default = the static app bar height; workspace JS re-measures the topbar
     at runtime so the dashboard strip row and its overlay offset always
     equal the row above them */
  --dashboard-header-height: 38px;
  --ui-w-insp: 300px;
  --ui-w-insp-rail: 44px;
  --ui-gutter: 12px;

  /* motion + stacking */
  --ui-z-pop: 60;
  --ui-dur: 150ms;
  --ui-dur-slow: 220ms;
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================================
   Report-dark scope. The report sheet alone has a dark variant, and the token
   file owns both variants so no component needs a colour literal. The accent
   stays the same blue in both: one accent, not one per theme.
   ========================================================================= */

.report-dark {
  --ui-surface:      #14152a;
  --ui-surface-soft: #1b1c33;
  --ui-app-bg:       #090a17;
  --ui-canvas-bg:    #0f1022;
  --ui-sunken:       #101126;
  --ui-hover:        #23244a;
  --ui-active:       #2d2f5c;

  --ui-ink:          #e8e8f8;
  --ui-ink-2:        #b2b4d6;
  --ui-muted:        #8b8daf;
  --ui-faint:        #696b90;

  --ui-line:         #27284a;
  --ui-line-strong:  #37385c;
  --ui-line-2:       #1e1f3c;

  --ui-accent-soft:  #1e2a5c;
  --ui-accent-line:  #3b4a86;
}

/* tools/convertProgressTW.html — the standalone converter carries its own
   GitHub-dark palette. Scoped here so the audit sees one definition site. */
:root.convert-tool{
  --bg:#0d1117;--bg2:#161b22;--bg3:#21262d;--bg4:#2d333b;
  --border:#30363d;--border2:#484f58;
  --text:#e6edf3;--text2:#8b949e;--text3:#6e7681;
  --orange:#f0883e;--blue:#58a6ff;--green:#3fb950;
  --yellow:#d29922;--red:#f85149;--purple:#bc8cff;
  --mono:'IBM Plex Mono',monospace;--sans:'Sarabun',sans-serif;
}