/*
 * Design tokens shared by the panel and the portal (ADR-0006 2.4.9). Portal branding later only
 * overrides these custom properties. Light theme by default, dark theme through the user's
 * prefers-color-scheme. Text/background pairs are chosen for WCAG 2.1 AA (>= 4.5:1; large text and
 * UI boundaries >= 3:1).
 */
:root {
  color-scheme: light dark;

  /* Surfaces and text (light) */
  --color-bg: #ffffff;
  --color-surface: #f4f5f7;
  --color-text: #1a1d23;
  --color-text-muted: #4b5563;
  --color-border: #8a919e;
  --color-border-subtle: #d3d7de;

  /* Actions and status (light); each *-text colour is for text on --color-bg or --color-surface */
  --color-primary: #1d4ed8;
  --color-on-primary: #ffffff;
  --color-link: #1d4ed8;
  --color-danger: #b42318;
  --color-on-danger: #ffffff;
  --color-success: #067647;
  --color-warning: #8a4b00;
  --color-focus: #1d4ed8;

  /* Tinted status backgrounds for notices and badges */
  --color-danger-bg: #fdecea;
  --color-success-bg: #e6f4ec;
  --color-warning-bg: #fdf1dc;
  --color-neutral-bg: #e8eaee;

  /* Typography: system stack, no web fonts (ADR-0006 2.4.8) */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-h1: 1.75rem;
  --font-size-h2: 1.375rem;
  --line-height: 1.5;

  /* Spacing, shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 0.375rem;
  --focus-ring-width: 3px;
  --content-max-width: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #12151a;
    --color-surface: #1b1f27;
    --color-text: #e8eaee;
    --color-text-muted: #a9b0bc;
    --color-border: #7b8494;
    --color-border-subtle: #343a46;

    --color-primary: #8ab4ff;
    --color-on-primary: #0b1220;
    --color-link: #8ab4ff;
    --color-danger: #ff9a8f;
    --color-on-danger: #1c0603;
    --color-success: #6fd6a0;
    --color-warning: #f2b85c;
    --color-focus: #8ab4ff;

    --color-danger-bg: #3a1a17;
    --color-success-bg: #14301f;
    --color-warning-bg: #3a2a10;
    --color-neutral-bg: #2a303b;
  }
}