/* Design tokens.
 *
 * Phase 0 laid down both light and dark token sets so later phases could ship
 * dark-mode-ready components without churn. Phase 9 now activates the dark
 * theme in the UI (see components/topbar.js for the toggle) and tightens
 * every token for WCAG 2.1 AA contrast:
 *
 *   - Normal text ≥ 4.5:1 against its background in both themes.
 *   - Large text ≥ 3:1.
 *   - --color-focus is always visible against the surface it lands on.
 *
 * Any hex literal added to another stylesheet should reference a token here
 * instead, so a future theme switch ripples through the whole UI. The
 * contrast check script (scripts/contrast-check.sh) asserts the ratios on
 * every commit. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Liberation Sans", sans-serif;
  --font-serif: Georgia, "Liberation Serif", "Times New Roman", serif;
  --font-mono: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --font-size-body: 14px;
  --font-size-sm: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-xxl: 28px;
  --line-height-body: 1.6;
  --line-height-tight: 1.35;

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

  /* Phase 73 — go-live config-gap highlight (warm, translucent light-red;
     theme-agnostic so it reads over both light and dark card surfaces). */
  --golive-warn-bg: rgba(214, 92, 76, 0.12);
  --golive-warn-bg-strong: rgba(214, 92, 76, 0.18);
  --golive-warn-border: rgba(214, 92, 76, 0.55);
  --golive-warn-field: rgba(214, 92, 76, 0.10);
  --golive-warn-banner-border: rgba(214, 92, 76, 0.45);
  --golive-pulse-shadow: rgba(214, 92, 76, 0.26);
  --golive-required: #c0392b;
  /* Go-live "ready" (green) + environment-mode badges (dev/uat/production). */
  --golive-ok-bg: rgba(22, 128, 80, 0.12);
  --golive-ok-border: rgba(22, 128, 80, 0.5);
  --golive-ok-fg: #1f7a4d;
  --env-dev-bg: rgba(100, 116, 139, 0.16);
  --env-dev-fg: #475569;
  --env-uat-bg: rgba(217, 119, 6, 0.18);
  --env-uat-fg: #b45309;
  --env-prod-bg: rgba(22, 128, 80, 0.16);
  --env-prod-fg: #1f7a4d;
  --space-12: 48px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);

  /* Dark mode reuses shadow tokens but needs heavier drop to remain visible
     on dim surfaces. Individual themes override as needed. */
  --code-highlight-saturation: 1;
  --code-highlight-lightness: 1;
}

html[data-theme="light"] {
  /* Lets native controls (the <option> dropdown list, date pickers,
     number-input spinners, scrollbars) render in the matching scheme.
     The <option> popup is OS-rendered and cannot be styled via CSS, so
     this declaration is the only thing that keeps it from showing white
     in dark mode. */
  color-scheme: light;
  --color-bg: #fbfbf9;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f4f0;
  --color-surface-canvas: #ffffff;
  --color-border: #dedbd4;
  --color-border-strong: #b0aca1;
  --color-text: #2a2a28;
  --color-text-muted: #595954;
  --color-text-inverse: #ffffff;
  --color-accent: #1f5280;
  --color-accent-hover: #174066;
  --color-accent-soft: #dbe7f2;
  --color-accent-muted: #dce7f3;
  --color-focus: #1f5280;
  --color-success: #2f6646;
  --color-success-soft: #dfece4;
  --color-warning: #8c5a1f;
  --color-warning-soft: #f3e6cf;
  --color-danger: #9a3622;
  --color-danger-soft: #f2d8d0;
  --color-info: #1f6b73;
  --color-info-soft: #d8ebed;
  --color-overlay: rgba(15, 23, 42, 0.42);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #15171b;
  --color-surface: #1e2128;
  --color-surface-alt: #252932;
  --color-surface-canvas: #2a2f39;
  --color-border: #343945;
  --color-border-strong: #5c6273;
  --color-text: #eef0f3;
  --color-text-muted: #b6bcc7;
  --color-text-inverse: #15171b;
  --color-accent: #8fbade;
  --color-accent-hover: #b8d2ea;
  --color-accent-soft: #253645;
  --color-accent-muted: #2c3e52;
  --color-focus: #b8d2ea;
  --color-success: #8fd0a6;
  --color-success-soft: #203029;
  --color-warning: #e0b078;
  --color-warning-soft: #3a2d1a;
  --color-danger: #ef9d89;
  --color-danger-soft: #3a241c;
  --color-info: #86cdd2;
  --color-info-soft: #1b2e30;
  --color-overlay: rgba(0, 0, 0, 0.62);
  /* Code-color highlights are researcher-chosen and stored at full
     saturation; in dark mode we desaturate/lighten them at render time so
     the text on top stays legible. See lib/theme.js for the runtime adjust
     that mirrors this intent server-side when we can't add a CSS filter. */
  --code-highlight-saturation: 0.55;
  --code-highlight-lightness: 1.35;
}

/* Coded segment highlights apply a per-code CSS variable for background.
   In dark mode the saturation/lightness are clamped via a filter so the text
   contrast holds. See web/js/lib/coding-text.js for the color computation. */
html[data-theme="dark"] .coded-segment {
  filter: saturate(var(--code-highlight-saturation)) brightness(var(--code-highlight-lightness));
}

/* WCAG — honour the user's OS-level reduced-motion setting. All Resonance
   animations and transitions are cosmetic, so disabling them has no
   functional impact. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}