/* Frozen production design tokens — see design/IMPLEMENTATION_TOKENS.md.
   Do not hand-edit values here without updating that document too. */

:root {
  /* Light theme (default) */
  --color-bg-canvas: #F7F8F6;
  --color-bg-surface: #FFFFFF;
  --color-bg-muted: #F0F2F0;
  --color-bg-evidence: #E7F2EE;
  --color-bg-warning: #FBF0E2;
  --color-bg-danger: #FBEAE6;

  --color-text-primary: #14181A;
  --color-text-body: #2B3532;
  --color-text-muted: #5B6663;
  --color-text-on-accent: #FFFFFF;

  --color-border-subtle: #D8DDDB;
  --color-border-strong: #B9C1BE;

  --color-accent-primary: #0B5D4C;
  --color-accent-primary-hover: #0A4F41;
  --color-accent-primary-pressed: #083F34;

  --color-success-text: #0B5D4C;
  --color-warning-text: #8A5A12;
  --color-warning-icon: #B9791E;
  --color-danger-text: #9A3324;
  --color-danger-icon: #B23F2C;
  --color-focus-ring: #0B5D4C;
  --color-link: #0B5D4C;
  --color-link-visited: #0B5D4C;

  /* Typography */
  --font-family-display: "Lora", Georgia, "Times New Roman", serif;
  --font-family-ui: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-body: 1.6;
  --line-height-dense: 1.4;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 2.75rem;
  --font-size-5xl: 3.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 800px;
  --gutter-mobile: 1rem;
  --gutter-desktop: 1.5rem;

  /* Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(14, 21, 19, 0.06);
  --shadow-md: 0 4px 16px rgba(14, 21, 19, 0.10);

  /* Focus */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 260ms;
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* Dark theme: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: #0E1513;
    --color-bg-surface: #16211D;
    --color-bg-muted: #121A17;
    --color-bg-evidence: #132520;
    --color-bg-warning: #241D12;
    --color-bg-danger: #241512;

    --color-text-primary: #EDF2F0;
    --color-text-body: #CBD5D1;
    --color-text-muted: #AEBAB6;
    --color-text-on-accent: #062019;

    --color-border-subtle: #26302C;
    --color-border-strong: #3A4642;

    --color-accent-primary: #4FD3AE;
    --color-accent-primary-hover: #6BDFC0;
    --color-accent-primary-pressed: #3FBFA0;

    --color-success-text: #4FD3AE;
    --color-warning-text: #E3B168;
    --color-warning-icon: #E3B168;
    --color-danger-text: #E58A78;
    --color-danger-icon: #E58A78;
    --color-focus-ring: #4FD3AE;
    --color-link: #4FD3AE;
    --color-link-visited: #4FD3AE;

    color-scheme: dark;
  }
}

/* Dark theme: manual override wins in both directions */
:root[data-theme="dark"] {
  --color-bg-canvas: #0E1513;
  --color-bg-surface: #16211D;
  --color-bg-muted: #121A17;
  --color-bg-evidence: #132520;
  --color-bg-warning: #241D12;
  --color-bg-danger: #241512;

  --color-text-primary: #EDF2F0;
  --color-text-body: #CBD5D1;
  --color-text-muted: #AEBAB6;
  --color-text-on-accent: #062019;

  --color-border-subtle: #26302C;
  --color-border-strong: #3A4642;

  --color-accent-primary: #4FD3AE;
  --color-accent-primary-hover: #6BDFC0;
  --color-accent-primary-pressed: #3FBFA0;

  --color-success-text: #4FD3AE;
  --color-warning-text: #E3B168;
  --color-warning-icon: #E3B168;
  --color-danger-text: #E58A78;
  --color-danger-icon: #E58A78;
  --color-focus-ring: #4FD3AE;
  --color-link: #4FD3AE;
  --color-link-visited: #4FD3AE;

  color-scheme: dark;
}

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}