/* Design tokens: colors, spacing, typography. Light + dark themes. */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12);

  --transition: 140ms ease;
}

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-elevated: #ffffff;
  --bg-sunken: #eaedf3;
  --bg-hover: #eef1f6;
  --border: #d7dce5;
  --border-strong: #b9c1cf;
  --text: #1a2233;
  --text-muted: #5a6577;
  --text-faint: #8b95a7;

  --accent: #2f6feb;
  --accent-hover: #1f5ad6;
  --accent-soft: #e6efff;
  --on-accent: #ffffff;

  --sev-critical: #b4232a;
  --sev-high: #d9531e;
  --sev-medium: #c9930b;
  --sev-low: #2e8b57;
  --sev-none: #6b7280;

  --ok: #1f8a4c;
  --warn: #c9930b;
  --err: #cf2233;
  --info: #2f6feb;

  /* product_status colors */
  --st-fixed: #1f8a4c;
  --st-affected: #cf2233;
  --st-not-affected: #2f6feb;
  --st-investigating: #c9930b;
  --st-recommended: #7b53c6;
  --st-unknown: #8b95a7;

  --ace-theme: "ace/theme/chrome";
}

/* Dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10141c;
  --bg-elevated: #171d28;
  --bg-sunken: #0b0e14;
  --bg-hover: #1f2634;
  --border: #262f3f;
  --border-strong: #3a4658;
  --text: #e6ebf4;
  --text-muted: #9aa6ba;
  --text-faint: #6b7688;

  --accent: #5b8dff;
  --accent-hover: #7aa3ff;
  --accent-soft: #1a2740;
  --on-accent: #0b0e14;

  --sev-critical: #ff6b74;
  --sev-high: #ff9d5c;
  --sev-medium: #f0c24b;
  --sev-low: #5fd08a;
  --sev-none: #9aa6ba;

  --ok: #5fd08a;
  --warn: #f0c24b;
  --err: #ff6b74;
  --info: #5b8dff;

  --st-fixed: #5fd08a;
  --st-affected: #ff6b74;
  --st-not-affected: #5b8dff;
  --st-investigating: #f0c24b;
  --st-recommended: #b18bf0;
  --st-unknown: #6b7688;

  --ace-theme: "ace/theme/github_dark";
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #10141c;
    --bg-elevated: #171d28;
    --bg-sunken: #0b0e14;
    --bg-hover: #1f2634;
    --border: #262f3f;
    --border-strong: #3a4658;
    --text: #e6ebf4;
    --text-muted: #9aa6ba;
    --text-faint: #6b7688;
    --accent: #5b8dff;
    --accent-hover: #7aa3ff;
    --accent-soft: #1a2740;
    --on-accent: #0b0e14;
    --sev-critical: #ff6b74;
    --sev-high: #ff9d5c;
    --sev-medium: #f0c24b;
    --sev-low: #5fd08a;
    --sev-none: #9aa6ba;
    --ok: #5fd08a;
    --warn: #f0c24b;
    --err: #ff6b74;
    --info: #5b8dff;
    --st-fixed: #5fd08a;
    --st-affected: #ff6b74;
    --st-not-affected: #5b8dff;
    --st-investigating: #f0c24b;
    --st-recommended: #b18bf0;
    --st-unknown: #6b7688;
  }
}