/* Design tokens: every color, space and font size is named here once.
   WHY: one change here updates the whole site, and dark mode only has to
   swap the color values at the bottom of this file. */
:root {
  /* Tells the browser to draw scrollbars and sliders for a light page. */
  color-scheme: light;

  /* Colors */
  --color-bg: #f7faf9;
  --color-bg-alt: #edf3f1;
  --color-surface: #ffffff;
  --color-border: #d3dedb;
  --color-border-strong: #6c7f7c;
  --color-text: #12201f;
  --color-text-muted: #47595a;
  --color-brand: #0f766e;
  --color-brand-strong: #0b5a54;
  --color-brand-soft: #d8efeb;
  --color-on-brand: #ffffff;
  --color-accent-soft: #fdecc8;
  --color-danger: #b42318;
  --color-success: #0f6b3c;
  --color-focus: #1d4ed8;
  --color-glow: rgba(15, 118, 110, 0.16);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(18, 32, 31, 0.06), 0 2px 6px rgba(18, 32, 31, 0.05);
  --shadow-md: 0 2px 4px rgba(18, 32, 31, 0.05), 0 10px 24px rgba(18, 32, 31, 0.09);
  --shadow-lg: 0 4px 10px rgba(18, 32, 31, 0.06), 0 24px 56px rgba(18, 32, 31, 0.14);

  /* Fonts. System fonts are already on the device, so nothing is downloaded. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;

  /* Type scale. clamp(min, fluid, max) lets big headings grow with the screen. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.45rem + 3.6vw, 3.75rem);

  /* Spacing scale */
  --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: 4rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Shapes and sizes */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 999px;
  --container: 72rem;
  --header-height: 4rem;
}

/* Dark theme: the same names with different values.
   js/theme-init.js puts data-theme="dark" on <html> when it is needed. */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0b1312;
  --color-bg-alt: #101b1a;
  --color-surface: #152120;
  --color-border: #2a3b39;
  --color-border-strong: #6f8683;
  --color-text: #e6eeec;
  --color-text-muted: #a4b5b2;
  --color-brand: #5eead4;
  --color-brand-strong: #99f6e4;
  --color-brand-soft: #143530;
  --color-on-brand: #06231f;
  --color-accent-soft: #4a3608;
  --color-danger: #ffa59a;
  --color-success: #7ee2a8;
  --color-focus: #93c5fd;
  --color-glow: rgba(94, 234, 212, 0.12);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
}