:root {
  color-scheme: light;

  /* Brand */
  --color-forest-950: #0d211b;
  --color-forest-900: #17372d;
  --color-forest-800: #21483b;
  --color-forest-700: #2d5a4b;
  --color-ivory-100: #f2eee2;
  --color-ivory-50: #faf8f1;
  --color-ink-950: #141a18;
  --color-ink-900: #1e2623;
  --color-ink-700: #44504b;
  --color-ink-500: #68736e;
  --color-copper-700: #8e4d34;
  --color-copper-600: #a85f40;
  --color-copper-500: #bd704e;
  --color-sage-500: #9caf9f;
  --color-sage-200: #d5ded3;
  --color-white: #fff;
  --color-danger-700: #9f2f2f;
  --color-success-700: #286344;

  /* Readable aliases for authored public/auth layouts. */
  --brand-forest: var(--color-forest-900);
  --brand-forest-strong: var(--color-forest-950);
  --brand-ivory: var(--color-ivory-100);
  --brand-cream: var(--color-ivory-50);
  --brand-ink: var(--color-ink-900);
  --brand-muted: var(--color-ink-500);
  --brand-copper: var(--color-copper-600);
  --brand-copper-dark: var(--color-copper-700);
  --brand-copper-light: var(--color-copper-500);
  --font-sans: var(--font-ui);

  /* Semantic roles */
  --surface-canvas: var(--color-ivory-50);
  --surface-warm: var(--color-ivory-100);
  --surface-raised: var(--color-white);
  --surface-brand: var(--color-forest-900);
  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-ink-700);
  --text-muted: var(--color-ink-500);
  --text-on-brand: var(--color-ivory-50);
  --border-subtle: color-mix(in srgb, var(--color-forest-900) 16%, transparent);
  --action-primary: var(--color-forest-900);
  --action-primary-hover: var(--color-forest-800);
  --action-accent: var(--color-copper-700);
  --focus-ring: var(--color-copper-600);

  /* Legacy aliases referenced by app.css panels; map onto the semantic roles. */
  --border-default: var(--border-subtle);
  --text-tertiary: var(--text-muted);
  --surface-subtle: var(--surface-warm);

  /* Type */
  --font-display: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  --font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --text-xl: clamp(1.25rem, 1.08rem + 0.75vw, 1.65rem);
  --text-2xl: clamp(1.85rem, 1.35rem + 2vw, 3rem);
  --text-hero: clamp(2.75rem, 1.65rem + 4.8vw, 6.5rem);
  --leading-tight: 1.02;
  --leading-copy: 1.55;

  /* Layout */
  --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;
  --space-9: 7rem;
  --page-gutter: clamp(1rem, 4vw, 4.5rem);
  --content-wide: 90rem;
  --content-copy: 42rem;
  --radius-sm: 0.35rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --shadow-soft: 0 1.25rem 4rem rgb(13 33 27 / 0.12);
  --transition-fast: 160ms ease;
  --transition-base: 260ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

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

html {
  background: var(--surface-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  text-size-adjust: 100%;
}

body {
  margin: 0;
}

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

button,
[href],
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]) {
  scroll-margin-block: var(--space-6);
}

:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

::selection {
  background: var(--color-sage-200);
  color: var(--color-ink-950);
}

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

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight !important;
  }
}