/* Design tokens — see DESIGN.md. Light is default; dark via [data-theme="dark"]. */

@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 400; font-display: swap; src: url("/vendor/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 500; font-display: swap; src: url("/vendor/fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 600; font-display: swap; src: url("/vendor/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-weight: 400; font-display: swap; src: url("/vendor/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+2000-206F, U+2074, 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-weight: 500; font-display: swap; src: url("/vendor/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+2000-206F, U+2074, 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-weight: 600; font-display: swap; src: url("/vendor/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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/vendor/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2212; }

:root {
  color-scheme: light;
  --paper: oklch(98.6% 0.004 85);
  --panel: oklch(96.2% 0.006 85);
  --sunken: oklch(93.5% 0.007 85);
  --line: oklch(89% 0.008 85);
  --line-strong: oklch(80% 0.01 85);
  --ink: oklch(22% 0.012 260);
  --ink-2: oklch(42% 0.012 260);
  --ink-3: oklch(52% 0.01 260);
  --accent: oklch(64% 0.19 42);
  --accent-hover: oklch(59% 0.19 42);
  --accent-ink: oklch(45% 0.15 42);
  --accent-wash: oklch(95% 0.035 55);
  --on-accent: oklch(15% 0.03 42);
  --track-dev: oklch(48% 0.14 252);
  --track-3d: oklch(48% 0.17 330);
  --track-qa: oklch(46% 0.12 152);
  --track-custom: oklch(48% 0.12 65);
  --ok: oklch(46% 0.13 152);
  --warn: oklch(52% 0.12 75);
  --bad: oklch(50% 0.19 25);
  --info: oklch(50% 0.14 252);
  --scrim: oklch(22% 0.012 260 / 0.4);
  --shadow: 0 8px 28px oklch(22% 0.012 260 / 0.14);
  --radius: 6px;
  --font: "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "IBM Plex Sans Thai", ui-monospace, monospace;
  --rail-w: 220px;
  --topbar-h: 52px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(19% 0.01 260);
  --panel: oklch(22% 0.011 260);
  --sunken: oklch(16.5% 0.01 260);
  --line: oklch(30% 0.012 260);
  --line-strong: oklch(40% 0.014 260);
  --ink: oklch(94% 0.005 85);
  --ink-2: oklch(78% 0.008 85);
  --ink-3: oklch(66% 0.01 85);
  --track-dev: oklch(72% 0.13 252);
  --track-3d: oklch(75% 0.15 330);
  --track-qa: oklch(75% 0.14 152);
  --track-custom: oklch(78% 0.13 70);
  --accent: oklch(70% 0.17 45);
  --accent-hover: oklch(75% 0.17 45);
  --accent-ink: oklch(78% 0.14 48);
  --accent-wash: color-mix(in oklab, var(--accent) 16%, var(--paper));
  --on-accent: oklch(15% 0.03 42);
  --ok: oklch(74% 0.14 152);
  --warn: oklch(80% 0.13 80);
  --bad: oklch(72% 0.16 25);
  --info: oklch(75% 0.11 252);
  --scrim: oklch(8% 0.01 260 / 0.6);
  --shadow: 0 8px 28px oklch(5% 0.01 260 / 0.5);
}

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