:root {
  color-scheme: light;

  /* Change these three values to recolor every brand accent. */
  --brand-hue: 43;
  --brand-saturation: 76%;
  --brand-lightness: 59%;
  --color-accent: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --color-accent-hover: hsl(var(--brand-hue) var(--brand-saturation) calc(var(--brand-lightness) + 7%));
  --color-accent-soft: hsl(var(--brand-hue) 65% 93%);
  --color-accent-ink: hsl(var(--brand-hue) 75% 26%);
  --color-on-accent: var(--color-ink);

  --color-background: #f7f6f1;
  --color-surface: #ffffff;
  --color-surface-alt: #eeede6;
  --color-ink: #17231d;
  --color-muted: #59645d;
  --color-border: #d9ded6;
  --color-dark: #121e18;
  --color-dark-raised: #1d2c23;
  --color-on-dark: #f7f8f2;
  --color-on-dark-muted: #b9c7bc;
  --color-success: #2f693c;
  --color-danger: #ad302a;
  --color-transparent: transparent;
  --color-dark-border: color-mix(in srgb, var(--color-on-dark) 16%, var(--color-transparent));
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 15%, var(--color-transparent));
  --color-overlay: color-mix(in srgb, var(--color-dark) 78%, var(--color-transparent));
  --shadow-card: 0 16px 48px color-mix(in srgb, var(--color-dark) 7%, var(--color-transparent));
  --shadow-floating: 0 20px 60px color-mix(in srgb, var(--color-dark) 25%, var(--color-transparent));

  --font-body: "Segoe UI", Arial, sans-serif;
  --font-display: "Segoe UI", Arial, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --content-width: 1200px;
  --radius-small: 0.75rem;
  --radius-card: 1.5rem;
  --radius-pill: 100px;
  --section-space: clamp(4rem, 8vw, 7rem);
  --transition: 180ms ease;
}