/*
 * Design tokens for the default theme.
 *
 * This is the ONLY place colors, fonts, spacing and sizes are defined. Everything else
 * (base.css, views) uses var(--token) values, so a new look is made by changing this file.
 * Light values are the default; dark values apply when the visitor's device prefers dark.
 * Keep text/background pairs at WCAG AA contrast (4.5:1 for normal text, 3:1 for large text and UI outlines).
 */

:root {
  color-scheme: light dark;

  /* Surfaces and text */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-text: #1b1f24;
  --color-text-muted: #4a5360;
  --color-border: #6b7686;
  --color-border-subtle: #d3d9e1;

  /* Links, buttons and focus */
  --color-accent: #1b5fc1;
  --color-accent-text: #ffffff;
  --color-focus: #8a4b00;

  /* Header bar */
  --color-header-bg: #14304f;
  --color-header-text: #ffffff;
  --color-header-focus: #ffd27a;

  /* Messages */
  --color-success-bg: #e3f4e8;
  --color-success-text: #12502a;
  --color-info-bg: #e2eefb;
  --color-info-text: #0f3d73;
  --color-warning-bg: #fff3d6;
  --color-warning-text: #5c3b00;
  --color-danger-bg: #fde6e4;
  --color-danger-text: #7a1410;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --line-height: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape and layout */
  --radius: 0.375rem;
  --border-width: 1px;
  --focus-width: 3px;
  --content-max: 70rem;
  --gutter: var(--space-4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #12161c;
    --color-surface: #1b2129;
    --color-text: #e8ecf1;
    --color-text-muted: #aab4c0;
    --color-border: #6b7686;
    --color-border-subtle: #3a4350;

    --color-accent: #7db3ff;
    --color-accent-text: #0b1b33;
    --color-focus: #ffb454;

    --color-header-bg: #0c2038;
    --color-header-text: #ffffff;
    --color-header-focus: #ffd27a;

    --color-success-bg: #123221;
    --color-success-text: #bfe8cd;
    --color-info-bg: #12294a;
    --color-info-text: #c4dcfb;
    --color-warning-bg: #3d2e0a;
    --color-warning-text: #ffe2a3;
    --color-danger-bg: #461b19;
    --color-danger-text: #ffc9c4;
  }
}