/*
 * Reset, design tokens and themes. Every colour token is one light-dark() pair, so the light and dark themes
 * cannot drift apart. The OS preference picks the theme; [data-theme] on <html> overrides it.
 */
:root {
  color-scheme: light dark;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-3xl: clamp(2.125rem, 1.5rem + 3.2vw, 3.5rem);
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --weight-normal: 400;
  --weight-medium: 550;
  --weight-bold: 700;
  --weight-black: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --content-max: 72rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Chicago flag: light blue stripes, red six-pointed stars. Text uses the darker shades for contrast. */
  --color-bg: light-dark(#f4f7fb, #0a111c);
  --color-surface: light-dark(#ffffff, #111b2a);
  --color-surface-2: light-dark(#eaf1f7, #16233a);
  --color-text: light-dark(#0e1a2b, #e8eef6);
  --color-text-muted: light-dark(#4a5a70, #a5b4c8);
  --color-border: light-dark(#d5dee9, #263650);
  --color-border-strong: light-dark(#b5c3d4, #3a4d6a);
  --color-primary: light-dark(#0a6ea8, #5ec3f2);
  --color-primary-hover: light-dark(#075885, #8dd5f6);
  --color-primary-soft: light-dark(#e2f1fa, #0f2b40);
  --color-on-primary: light-dark(#ffffff, #04131f);
  --color-sky: light-dark(#b3ddf2, #1d4a66);
  --color-accent: light-dark(#cf1430, #ff6478);
  --color-accent-soft: light-dark(#fde9ec, #3b1821);
  --color-success: light-dark(#157347, #52c98f);
  --color-success-soft: light-dark(#e3f5ec, #0f2a1e);
  --color-warning: light-dark(#8a5300, #f2b552);
  --color-warning-soft: light-dark(#fdf2dc, #2f2410);
  --color-danger: light-dark(#b42318, #ff8077);
  --color-danger-soft: light-dark(#fdebe9, #3a1714);
  --color-focus: light-dark(#0a6ea8, #8dd5f6);

  --shadow-sm: 0 1px 2px light-dark(rgb(14 26 43 / 0.06), rgb(0 0 0 / 0.4));
  --shadow-md: 0 1px 2px light-dark(rgb(14 26 43 / 0.05), rgb(0 0 0 / 0.35)), 0 8px 24px light-dark(rgb(14 26 43 / 0.08), rgb(0 0 0 / 0.35));
}

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

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/* A layout class such as .stack sets display, which would otherwise show a [hidden] element. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: var(--leading-snug);
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--color-sky);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}