/* HIE Dashboard — Design tokens & global typography (Kanit) */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #1a7f4b;
  --primary-dark: #125a32;
  --primary-light: #2e9d5c;
  --primary-muted: rgba(26, 127, 75, 0.12);
  --primary-glow: rgba(26, 127, 75, 0.28);

  --font: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Kanit', var(--font);
  --font-size-base: 12px;
  --font-size-sm: 11px;
  --font-size-lg: 14px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 31, 23, 0.05);
  --shadow-md: 0 4px 20px rgba(15, 31, 23, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 31, 23, 0.12);

  /* Light */
  --bg0: #edf2ef;
  --bg1: #ffffff;
  --bg2: #f7faf8;
  --bg3: #eef4f0;
  --bg4: #dfe8e2;
  --border: #c8d5cc;
  --border-subtle: rgba(26, 127, 75, 0.12);
  --text1: #142117;
  --text2: #4a5f52;
  --text3: #7a8f82;
  --accent: #1a7f4b;
  --accent2: #2e9d5c;
  --accent3: #156b3f;
  --blue: #0b6bcb;
  --blue2: #0550ae;
  --amber: #8a6100;
  --amber2: #b8860b;
  --red: #c41e3a;
  --red2: #9b1830;
  --purple: #6e40c9;
  --teal: #1a7f73;
  --chart-grid: #d4e0d8;
  --chart-label: #6b7f74;
  --donut-track: #dce6e0;
  --donut-center-text: #142117;
  --table-row-border: rgba(200, 213, 204, 0.9);
  --table-hover: rgba(26, 127, 75, 0.05);
  --range-active-bg: rgba(26, 127, 75, 0.12);
  --nav-active-bg: rgba(26, 127, 75, 0.1);
  --heatmap-outline: rgba(20, 33, 23, 0.3);
  --modal-overlay: rgba(14, 28, 20, 0.5);
  --logo-icon-glyph: #ffffff;
  --logo-icon-ring: rgba(255, 255, 255, 0.25);
  --logo-text: var(--accent3);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --sidebar-bg: #ffffff;
  color-scheme: light;
}

html[data-theme='dark'] {
  --bg0: #0a100d;
  --bg1: #121a15;
  --bg2: #171f1a;
  --bg3: #1e2822;
  --bg4: #2a3630;
  --border: #2f3d35;
  --border-subtle: rgba(61, 220, 140, 0.1);
  --text1: #e8f0eb;
  --text2: #9fb5a8;
  --text3: #6d8278;
  --accent: #2ea36b;
  --accent2: #3ddc8c;
  --accent3: #5ae89f;
  --blue: #4d9eff;
  --blue2: #79b8ff;
  --amber: #e3b341;
  --amber2: #f0c14b;
  --red: #f47067;
  --red2: #ff8a84;
  --purple: #a371f7;
  --teal: #3dd6c3;
  --chart-grid: #2f3d35;
  --chart-label: #6d8278;
  --donut-track: #1e2822;
  --donut-center-text: #e8f0eb;
  --table-row-border: rgba(47, 61, 53, 0.8);
  --table-hover: rgba(61, 220, 140, 0.06);
  --range-active-bg: rgba(61, 220, 140, 0.1);
  --nav-active-bg: rgba(61, 220, 140, 0.08);
  --heatmap-outline: rgba(255, 255, 255, 0.25);
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --logo-icon-glyph: #f0fff6;
  --logo-icon-ring: rgba(255, 255, 255, 0.18);
  --logo-text: var(--accent3);
  --topbar-bg: rgba(18, 26, 21, 0.94);
  --sidebar-bg: #121a15;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font);
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}