/* Hallmark · tokens · theme: Cobalt (adapted, Thai) · genre: modern-minimal · light default + dark */
:root {
  color-scheme: light;
  --color-paper:   oklch(98.4% 0.004 250);
  --color-paper-2: oklch(95.6% 0.006 250);
  --color-paper-3: oklch(92.4% 0.008 250);
  --color-ink:     oklch(21% 0.02 260);
  --color-ink-2:   oklch(43% 0.02 260);
  --color-ink-3:   oklch(58% 0.015 260);
  --color-rule:    oklch(89.5% 0.008 250);
  --color-accent:  oklch(53% 0.2 262);
  --color-accent-ink: oklch(99% 0 0);
  --color-accent-soft: oklch(93% 0.04 262);
  --color-focus:   oklch(58% 0.2 262);
  --color-ok:      oklch(48% 0.12 155);
  --color-ok-soft: oklch(94% 0.04 155);
  --color-warn:    oklch(47% 0.1 75);
  --color-warn-soft: oklch(94.5% 0.06 90);
  --color-bad:     oklch(52% 0.18 27);
  --color-bad-soft: oklch(94.5% 0.03 27);
  --color-code-bg: oklch(22% 0.02 260);
  --color-code-ink: oklch(92% 0.01 250);
  --color-scrim:   oklch(15% 0.01 260 / 0.92);
  /* WebGL field: two stops the shader blends between, read at runtime */
  --gl-a: 0.984 0.004 250;
  --gl-b: 0.905 0.065 258;

  --font-display: "IBM Plex Sans Thai", "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Thai", "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-amount: clamp(2rem, 9vw, 2.75rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --rule-hair: 1px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;

  --tab-h: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper:   oklch(17.5% 0.012 260);
  --color-paper-2: oklch(21.5% 0.014 260);
  --color-paper-3: oklch(26% 0.016 260);
  --color-ink:     oklch(95% 0.006 250);
  --color-ink-2:   oklch(78% 0.012 255);
  --color-ink-3:   oklch(63% 0.014 258);
  --color-rule:    oklch(30% 0.016 260);
  --color-accent:  oklch(68% 0.16 258);
  --color-accent-ink: oklch(16% 0.02 260);
  --color-accent-soft: oklch(30% 0.07 262);
  --color-focus:   oklch(74% 0.15 258);
  --color-ok:      oklch(76% 0.13 155);
  --color-ok-soft: oklch(28% 0.05 155);
  --color-warn:    oklch(84% 0.12 88);
  --color-warn-soft: oklch(30% 0.05 85);
  --color-bad:     oklch(74% 0.14 25);
  --color-bad-soft: oklch(29% 0.05 25);
  --color-code-bg: oklch(13% 0.01 260);
  --gl-a: 0.175 0.012 260;
  --gl-b: 0.285 0.075 262;
}