/* tokens.css - design system primitives.
 *
 * Single source of truth for colour, type, spacing and elevation. Everything
 * else composes from these. Light and dark are both first-class: the site is
 * read at length, so contrast is tuned for body text rather than for a
 * screenshot.
 */

:root {
  color-scheme: light;

  /* surface */
  --bg: #f7f7f5;
  --bg-alt: #efefec;
  --surface: #ffffff;
  --surface-2: #fbfbf9;
  --surface-inset: #f2f2ef;
  --overlay: rgba(24, 24, 22, 0.48);

  /* line */
  --border: #e2e2dd;
  --border-strong: #cdcdc6;
  --border-inverse: rgba(255, 255, 255, 0.16);

  /* text */
  --text: #1a1a18;
  --text-soft: #45453f;
  --muted: #6e6e66;
  --faint: #96968d;
  --text-inverse: #ffffff;

  /* brand: a research publication, not a startup */
  --accent: #14504a;
  --accent-hover: #0e3c37;
  --accent-soft: #e3efec;
  --accent-contrast: #ffffff;
  --accent-2: #9a3f26;
  --accent-2-soft: #f6e8e3;

  /* status */
  --ok: #1f6b3a;
  --ok-soft: #e4f1e8;
  --warn: #8a5a08;
  --warn-soft: #fbf0dc;
  --danger: #a32020;
  --danger-soft: #fbe8e7;
  --info: #1f4f7a;
  --info-soft: #e6eef6;

  /* charts */
  --chart-1: #14504a;
  --chart-2: #2f7f74;
  --chart-3: #6aa89c;
  --chart-4: #9a3f26;
  --chart-5: #c4763f;
  --chart-6: #4a6b8a;
  --chart-7: #7f8a4a;
  --chart-8: #8a6b9a;
  --chart-grid: #e6e6e1;

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;
  --step-5: 3rem;
  --step-6: 3.75rem;

  --leading-tight: 1.2;
  --leading-snug: 1.38;
  --leading-normal: 1.65;

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(24, 24, 22, 0.06);
  --shadow: 0 2px 8px rgba(24, 24, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(24, 24, 22, 0.14);

  --measure: 68ch;
  --content-width: 1200px;
  --header-height: 68px;

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

[data-theme='dark'] {
  color-scheme: dark;

  --bg: #141414;
  --bg-alt: #1b1b1a;
  --surface: #1e1e1d;
  --surface-2: #242423;
  --surface-inset: #191918;
  --overlay: rgba(0, 0, 0, 0.66);

  --border: #32322f;
  --border-strong: #45453f;
  --border-inverse: rgba(255, 255, 255, 0.12);

  --text: #efefeb;
  --text-soft: #cfcfc8;
  --muted: #a0a099;
  --faint: #7c7c75;
  --text-inverse: #141414;

  --accent: #6fb3a6;
  --accent-hover: #8ac7ba;
  --accent-soft: #1d2f2c;
  --accent-contrast: #0d1a18;
  --accent-2: #d98a6a;
  --accent-2-soft: #33211b;

  --ok: #74c48d;
  --ok-soft: #17291d;
  --warn: #e0b365;
  --warn-soft: #2d2517;
  --danger: #e58a86;
  --danger-soft: #2e1a19;
  --info: #86b4dd;
  --info-soft: #17232f;

  --chart-1: #6fb3a6;
  --chart-2: #4f9488;
  --chart-3: #357a70;
  --chart-4: #d98a6a;
  --chart-5: #c4763f;
  --chart-6: #86a8c9;
  --chart-7: #a8b473;
  --chart-8: #b39ac4;
  --chart-grid: #2c2c2a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
}

/* Respect the reader's system preference when they have not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #141414;
    --bg-alt: #1b1b1a;
    --surface: #1e1e1d;
    --surface-2: #242423;
    --surface-inset: #191918;
    --overlay: rgba(0, 0, 0, 0.66);
    --border: #32322f;
    --border-strong: #45453f;
    --border-inverse: rgba(255, 255, 255, 0.12);
    --text: #efefeb;
    --text-soft: #cfcfc8;
    --muted: #a0a099;
    --faint: #7c7c75;
    --text-inverse: #141414;
    --accent: #6fb3a6;
    --accent-hover: #8ac7ba;
    --accent-soft: #1d2f2c;
    --accent-contrast: #0d1a18;
    --accent-2: #d98a6a;
    --accent-2-soft: #33211b;
    --ok: #74c48d;
    --ok-soft: #17291d;
    --warn: #e0b365;
    --warn-soft: #2d2517;
    --danger: #e58a86;
    --danger-soft: #2e1a19;
    --info: #86b4dd;
    --info-soft: #17232f;
    --chart-1: #6fb3a6;
    --chart-2: #4f9488;
    --chart-3: #357a70;
    --chart-4: #d98a6a;
    --chart-5: #c4763f;
    --chart-6: #86a8c9;
    --chart-7: #a8b473;
    --chart-8: #b39ac4;
    --chart-grid: #2c2c2a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  }
}

@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;
  }
}

/* Screen-reader-only text: used for chart captions and icon labels. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}