/*
 * Design tokens. Light theme on :root, dark theme on [data-theme="dark"].
 * js/ui/theme.js resolves "system" to light/dark via prefers-color-scheme.
 * Contrast pairs are verified by tests/contrast.test.mjs (WCAG 2.1 AA).
 */
:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-surface: #f4f6f9;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eceff3;
  --color-surface-glass: rgba(244, 246, 249, 0.82);
  --color-text: #1a1d21;
  --color-text-muted: #4a5260;
  --color-border: #c4cad3;
  --color-border-strong: #7a8391;
  --color-ok-bg: #e6f4ea;
  --color-ok-text: #1e5b2e;
  --color-warn-bg: #fdecea;
  --color-warn-text: #8e1c1c;
  --color-tissue: #c9b8a8;
  --color-arterial-soft: #f6d5d5;
  --color-venous-soft: #d3e3f8;

  /* Blood colors: arterial red, venous blue (spec section 11) */
  --color-arterial: #c62828;
  --color-venous: #1565c0;

  --color-accent: var(--color-venous);
  --color-accent-hover: #0d4e94;
  --color-brand-soft: #e7eef9;
  --color-on-accent: #ffffff;
  --color-focus: #1565c0;
  --color-focus-soft: rgba(21, 101, 192, 0.22);

  --color-notice-bg: #fff4e5;
  --color-notice-text: #5c3500;
  --color-notice-border: #e0a040;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-size-base: 1rem;
  --line-height: 1.55;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 1rem;
  --radius-full: 999px;
  --content-max: 64rem;
  --tap-min: 44px;

  --duration-fast: 120ms;
  --duration: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-sm: 0 1px 2px rgba(20, 24, 34, 0.08);
  --shadow-md: 0 6px 16px rgba(20, 24, 34, 0.1), 0 2px 4px rgba(20, 24, 34, 0.05);
  --shadow-lg: 0 16px 32px rgba(20, 24, 34, 0.14), 0 4px 10px rgba(20, 24, 34, 0.06);
}

/* Same dark values for "system" when JS has not set data-theme yet. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #121417;
    --color-surface: #1b1f25;
    --color-surface-raised: #232831;
    --color-surface-sunken: #0e1013;
    --color-surface-glass: rgba(27, 31, 37, 0.78);
    --color-text: #e8eaed;
    --color-text-muted: #aab1bc;
    --color-border: #4a525e;
    --color-border-strong: #8a93a0;
    --color-ok-bg: #16301e;
    --color-ok-text: #a6dcb4;
    --color-warn-bg: #3a1a1a;
    --color-warn-text: #ffb4b0;
    --color-tissue: #6b5d50;
    --color-arterial-soft: #4a2020;
    --color-venous-soft: #1c3150;

    --color-arterial: #ef8a8a;
    --color-venous: #8ab8f5;

    --color-accent: var(--color-venous);
    --color-accent-hover: #a9cdf6;
    --color-brand-soft: #1b2a3f;
    --color-on-accent: #0b1a2e;
    --color-focus: #8ab8f5;
    --color-focus-soft: rgba(138, 184, 245, 0.28);

    --color-notice-bg: #33260f;
    --color-notice-text: #ffdcaa;
    --color-notice-border: #8a6420;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35);
  }
}

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

  --color-bg: #121417;
  --color-surface: #1b1f25;
  --color-surface-raised: #232831;
  --color-surface-sunken: #0e1013;
  --color-surface-glass: rgba(27, 31, 37, 0.78);
  --color-text: #e8eaed;
  --color-text-muted: #aab1bc;
  --color-border: #4a525e;
  --color-border-strong: #8a93a0;
  --color-ok-bg: #16301e;
  --color-ok-text: #a6dcb4;
  --color-warn-bg: #3a1a1a;
  --color-warn-text: #ffb4b0;
  --color-tissue: #6b5d50;
  --color-arterial-soft: #4a2020;
  --color-venous-soft: #1c3150;

  --color-arterial: #ef8a8a;
  --color-venous: #8ab8f5;

  --color-accent: var(--color-venous);
  --color-accent-hover: #a9cdf6;
  --color-brand-soft: #1b2a3f;
  --color-on-accent: #0b1a2e;
  --color-focus: #8ab8f5;
  --color-focus-soft: rgba(138, 184, 245, 0.28);

  --color-notice-bg: #33260f;
  --color-notice-text: #ffdcaa;
  --color-notice-border: #8a6420;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
    --duration-fast: 0ms;
  }
}