:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Iowan Old Style, "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-ui: var(--font-sans);
  --font-reading: var(--font-serif);

  /* Keep these light palettes aligned with ../ethics-of-ai/frontend/src/index.css.
     The React site's active palette is plum. */
  --canvas: #faf5ff;
  --canvas-evals: #faf5ff;
  --surface: #ffffff;
  --surface-accent: #ede9fe;
  --ink: #1e1b4b;
  --ink-reading: #334155;
  --ink-muted: #334155;
  --ink-soft: #64748b;
  --accent: #7c3aed;
  --accent-strong: #5b21b6;
  --line: #e9d5ff;
  --line-strong: #c4b5fd;
  --eval-glow: #ede9fe;
  --eval-line: #e9d5ff;
  --eval-footer-line: #e9d5ff;
  --focus-outline: #8b5cf6;

  --page-gutter: clamp(1.25rem, 5vw, 4rem);
  --page-max: 80rem;
  --radius-control: .55rem;
  --radius-panel: .9rem;
  --radius-feature: 1.5rem;
  --section-space: clamp(3rem, 8vw, 6rem);
  /* Scroll motion: one duration and easing, and the gap between staggered items. */
  --motion-duration: 600ms;
  --motion-stagger: 90ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --type-section-heading: clamp(2rem, 3.7vw, 3.5rem);
  --media-surface: #f0f2f5;
  /* Client logos are dark marks, so they keep a light plate in every theme. */
  --logo-plate: #ffffff;
  /* Certificate statuses on the verify page, the same in every palette. */
  --status-passed-ink: #166534;
  --status-passed-surface: #dcfce7;
  --status-expired-ink: #475569;
  --status-expired-surface: #f1f5f9;
  --status-revoked-ink: #991b1b;
  --status-revoked-surface: #fee2e2;
  --status-review-ink: #1d4ed8;
  --status-review-surface: #dbeafe;
}

:root[data-palette="atlantic"] {
  --canvas: #f8fafc;
  --canvas-evals: #f8fafc;
  --surface: #ffffff;
  --surface-accent: #dbeafe;
  --ink: #0f172a;
  --ink-reading: #334155;
  --ink-muted: #334155;
  --ink-soft: #64748b;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --line: #e2e8f0;
  --line-strong: #bfdbfe;
  --eval-glow: #dbeafe;
  --eval-line: #e2e8f0;
  --eval-footer-line: #e2e8f0;
  --focus-outline: #3b82f6;
}

:root[data-palette="graphite"] {
  --canvas: #fafafa;
  --canvas-evals: #fafafa;
  --surface: #ffffff;
  --surface-accent: #e0e7ff;
  --ink: #020617;
  --ink-reading: #334155;
  --ink-muted: #334155;
  --ink-soft: #64748b;
  --accent: #0f172a;
  --accent-strong: #1e293b;
  --line: #e4e4e7;
  --line-strong: #c7d2fe;
  --eval-glow: #e0e7ff;
  --eval-line: #e4e4e7;
  --eval-footer-line: #e4e4e7;
  --focus-outline: #6366f1;
}

:root[data-font="serif"] { --font-ui: var(--font-serif); --font-reading: var(--font-serif); }
:root[data-font="mono"] { --font-ui: var(--font-mono); --font-reading: var(--font-mono); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --media-surface: #141923;
  --canvas: #1e1b4b;
  --canvas-evals: #17143b;
  --surface: #2e285f;
  --surface-accent: #4c1d95;
  --ink: #ffffff;
  --ink-reading: #ede9fe;
  --ink-muted: #ddd6fe;
  --ink-soft: #c4b5fd;
  --accent: #c4b5fd;
  --accent-strong: #ede9fe;
  --line: #4c3f82;
  --line-strong: #7c3aed;
  --eval-glow: #3b2777;
  --eval-line: #5b4b91;
  --eval-footer-line: #4c3f82;
  --focus-outline: #a78bfa;
  --status-passed-ink: #86efac;
  --status-passed-surface: #052e16;
  --status-expired-ink: #cbd5e1;
  --status-expired-surface: #1e293b;
  --status-revoked-ink: #fca5a5;
  --status-revoked-surface: #450a0a;
  --status-review-ink: #93c5fd;
  --status-review-surface: #172554;
}

:root[data-theme="dark"][data-palette="atlantic"] {
  --canvas: #0f172a;
  --canvas-evals: #0b1222;
  --surface: #1e293b;
  --surface-accent: #1e3a8a;
  --ink: #ffffff;
  --ink-reading: #dbeafe;
  --ink-muted: #cbd5e1;
  --ink-soft: #94a3b8;
  --accent: #93c5fd;
  --accent-strong: #dbeafe;
  --line: #334155;
  --line-strong: #2563eb;
  --eval-glow: #172f63;
  --eval-line: #3b4d68;
  --eval-footer-line: #334155;
  --focus-outline: #60a5fa;
}

:root[data-theme="dark"][data-palette="graphite"] {
  --canvas: #020617;
  --canvas-evals: #020617;
  --surface: #0f172a;
  --surface-accent: #312e81;
  --ink: #ffffff;
  --ink-reading: #e0e7ff;
  --ink-muted: #cbd5e1;
  --ink-soft: #a1a1aa;
  --accent: #c7d2fe;
  --accent-strong: #e0e7ff;
  --line: #272f40;
  --line-strong: #4f46e5;
  --eval-glow: #242463;
  --eval-line: #3d4660;
  --eval-footer-line: #272f40;
  --focus-outline: #818cf8;
}