/* Design tokens — every color in the app flows through these custom
 * properties. Light values live on :root. The dark set applies when the
 * user picked Dark (html[data-theme="dark"], set by theme_controller.js
 * and the head script in the layout) or when they picked System and the
 * OS prefers dark. The dark block is written twice because plain CSS has
 * no way to share a declaration list between a media query and a
 * selector: keep both copies identical. */

:root {
  color-scheme: light;

  /* Color */
  --color-bg: #f8f8f7;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f1ef;
  --color-text: #1c1c1a;
  --color-text-muted: #6b6b66;
  --color-border: #e2e2de;
  --color-border-strong: #a8a8a1; /* 3:1 on --color-bg: inputs, outlined buttons */
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-on-accent: #ffffff;
  --color-danger: #b91c1c;
  --color-danger-bg: #fdecec;
  --color-success: #15803d;
  --color-success-bg: #e9f6ee;
  --color-code-bg: #eeeeeb;
  --color-scrim: rgb(0 0 0 / 0.4);

  /* Type scale (system stack set on body in base.css; body is --text-sm) */
  --text-xs: 0.8125rem; /* 13px: table headers, hints, badges */
  --text-sm: 0.875rem;  /* 14px: body */
  --text-md: 1rem;      /* 16px: section headings */
  --text-lg: 1.25rem;   /* 20px: page title */

  /* Spacing scale, 4px base */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 3rem;    /* 48 */

  /* Shape & focus */
  --radius-sm: 6px;
  --radius-md: 10px;
  --focus-ring: 2px solid var(--color-accent);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #131312;
  --color-surface: #1e1e1c;
  --color-surface-hover: #262624;
  --color-text: #ececea;
  --color-text-muted: #a3a39c;
  --color-border: #34342f;
  --color-border-strong: #5a5a53;
  --color-accent: #818cf8;
  --color-accent-hover: #a5b4fc;
  --color-on-accent: #16163a;
  --color-danger: #f2818b;
  --color-danger-bg: #3a1d1f;
  --color-success: #5fd08a;
  --color-success-bg: #16301f;
  --color-code-bg: #2a2a27;
  --color-scrim: rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #131312;
    --color-surface: #1e1e1c;
    --color-surface-hover: #262624;
    --color-text: #ececea;
    --color-text-muted: #a3a39c;
    --color-border: #34342f;
    --color-border-strong: #5a5a53;
    --color-accent: #818cf8;
    --color-accent-hover: #a5b4fc;
    --color-on-accent: #16163a;
    --color-danger: #f2818b;
    --color-danger-bg: #3a1d1f;
    --color-success: #5fd08a;
    --color-success-bg: #16301f;
    --color-code-bg: #2a2a27;
    --color-scrim: rgb(0 0 0 / 0.6);
  }
}