/* Design tokens: colours (light and dark), fonts, radii and motion timing. Every other stylesheet uses only these. */
:root {
  --bg: #EDF1F2;
  --surface: #FFFFFF;
  --surface-2: #E2E9EB;
  --ink: #152329;
  --muted: #566870;
  --line: #D0DADD;
  --accent: #1F6B57;
  --accent-soft: #D3E9E0;
  --accent-ink: #FFFFFF;
  --warm: #B8641F;
  --warm-soft: #F5E3D1;
  --danger: #B4423A;
  --danger-soft: #F6DEDB;

  --font-display: "Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-number: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --radius-card: 14px;
  --radius-control: 10px;
  --gap-page: 18px;
  --gutter: 16px;
  --column: 560px;

  --motion-fast: 160ms;
  --motion-medium: 280ms;
  --motion-slow: 520ms;
  --motion-stagger: 55ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F171A;
    --surface: #172227;
    --surface-2: #1F2D33;
    --ink: #E3ECEE;
    --muted: #93A6AD;
    --line: #2A3A40;
    --accent: #5EC2A0;
    --accent-soft: #1D3D34;
    --accent-ink: #0B1A15;
    --warm: #EDA25E;
    --warm-soft: #3B2A1B;
    --danger: #E3786E;
    --danger-soft: #3A201D;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0F171A;
  --surface: #172227;
  --surface-2: #1F2D33;
  --ink: #E3ECEE;
  --muted: #93A6AD;
  --line: #2A3A40;
  --accent: #5EC2A0;
  --accent-soft: #1D3D34;
  --accent-ink: #0B1A15;
  --warm: #EDA25E;
  --warm-soft: #3B2A1B;
  --danger: #E3786E;
  --danger-soft: #3A201D;
  color-scheme: dark;
}