/*
 * tokens.css - Keel.to design tokens (CSS custom properties, prefix --k-).
 * Source of truth: docs/DESIGN.md. Change DESIGN.md first, then this file.
 * Themes: light by default; dark when the system asks for it, unless the visitor
 * chose a theme with the theme switch (html[data-theme="light" | "dark"]).
 */

:root {
  /* Colors: light theme */
  --k-color-bg: #f5f6f8;
  --k-color-surface: #ffffff;
  --k-color-surface-code: #eef1f5;
  --k-color-border: #c4cbd4;
  --k-color-border-strong: #7a8494;
  --k-color-text: #1b2330;
  --k-color-text-muted: #4f5b6b;
  --k-color-accent: #1f4e8c;
  --k-color-accent-hover: #173d6e;
  --k-color-on-accent: #ffffff;
  --k-color-success: #1e6b3a;
  --k-color-warning: #8a5a00;
  --k-color-danger: #b42318;

  /* Fonts */
  --k-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --k-font-code: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --k-font-size-s: 0.875rem;
  --k-font-size-m: 1rem;
  --k-font-size-l: 1.125rem;
  --k-font-size-xl: 1.375rem;
  --k-font-size-xxl: 1.75rem;
  --k-font-size-xxxl: 2.25rem;
  --k-line-height-text: 1.6;
  --k-line-height-heading: 1.25;
  --k-font-weight-normal: 400;
  --k-font-weight-strong: 600;

  /* Spacing (4 px base) */
  --k-space-xxs: 4px;
  --k-space-xs: 8px;
  --k-space-s: 12px;
  --k-space-m: 16px;
  --k-space-l: 24px;
  --k-space-xl: 32px;
  --k-space-xxl: 48px;
  --k-space-xxxl: 64px;

  /* Shape, depth, motion, reading width */
  --k-radius-s: 4px;
  --k-radius-m: 8px;
  --k-shadow-s: 0 1px 2px rgb(0 0 0 / 0.06);
  --k-duration: 150ms;
  --k-measure: 72ch;
  --k-measure-wide: 120ch; /* Full standard: text, lists, code blocks, and tables */

  color-scheme: light;
}

/* Dark theme values, shared by the 2 selectors below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k-color-bg: #0f141b;
    --k-color-surface: #1c2533;
    --k-color-surface-code: #243040;
    --k-color-border: #76839a;
    --k-color-border-strong: #8a96a8;
    --k-color-text: #e6eaf0;
    --k-color-text-muted: #a3adbb;
    --k-color-accent: #7fb0f0;
    --k-color-accent-hover: #a5c8f5;
    --k-color-on-accent: #0f141b;
    --k-color-success: #6fcf8f;
    --k-color-warning: #e8b65a;
    --k-color-danger: #f2867c;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --k-color-bg: #0f141b;
  --k-color-surface: #1c2533;
  --k-color-surface-code: #243040;
  --k-color-border: #76839a;
  --k-color-border-strong: #8a96a8;
  --k-color-text: #e6eaf0;
  --k-color-text-muted: #a3adbb;
  --k-color-accent: #7fb0f0;
  --k-color-accent-hover: #a5c8f5;
  --k-color-on-accent: #0f141b;
  --k-color-success: #6fcf8f;
  --k-color-warning: #e8b65a;
  --k-color-danger: #f2867c;
  color-scheme: dark;
}

/* No motion when the visitor asks for reduced motion (DESIGN.md Motion). */
@media (prefers-reduced-motion: reduce) {
  :root { --k-duration: 0ms; }
}