:root {
  color-scheme: light;
  --color-brand-brown: #311a00;
  --color-brand-gold: #fdb748;
  --color-brand-white: #ffffff;

  --color-neutral-950: #211b16;
  --color-neutral-800: #443c35;
  --color-neutral-700: #5d554d;
  --color-neutral-500: #89817a;
  --color-neutral-300: #c9c3bd;
  --color-neutral-200: #ded9d4;
  --color-neutral-100: #eeeae6;
  --color-neutral-50: #f8f6f3;

  --color-success-700: #25633f;
  --color-success-50: #edf8f1;
  --color-warning-700: #805600;
  --color-warning-50: #fff7e6;
  --color-error-700: #a3312d;
  --color-error-50: #fff1f0;
  --color-info-700: #285b7a;
  --color-info-50: #eef7fc;

  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-muted: var(--color-neutral-500);
  --color-text-brand: var(--color-brand-brown);
  --color-text-inverse: var(--color-brand-white);
  --color-surface-page: var(--color-brand-white);
  --color-surface-subtle: var(--color-neutral-50);
  --color-surface-brand: var(--color-brand-brown);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-action-primary: var(--color-brand-brown);
  --color-action-primary-text: var(--color-brand-white);
  --color-action-primary-hover: #4a2904;
  --color-action-accent: var(--color-brand-gold);
  --color-focus: var(--color-brand-gold);

  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-caption: 0.75rem;
  --font-size-label: 0.8125rem;
  --font-size-body-sm: 0.875rem;
  --font-size-body: 1rem;
  --font-size-body-lg: 1.125rem;
  --font-size-h3: 1.375rem;
  --font-size-h2: 1.75rem;
  --font-size-h1: 2.25rem;
  --font-size-display: 3rem;

  --line-caption: 1.0625rem;
  --line-label: 1.125rem;
  --line-body-sm: 1.3125rem;
  --line-body: 1.625rem;
  --line-body-lg: 1.8125rem;
  --line-h3: 1.875rem;
  --line-h2: 2.25rem;
  --line-h1: 2.75rem;
  --line-display: 3.5rem;

  --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.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-full: 999px;
  --border-width: 1px;

  --shadow-sm: 0 1px 2px rgb(49 26 0 / 8%);
  --shadow-md: 0 8px 24px rgb(49 26 0 / 12%);
  --shadow-lg: 0 18px 48px rgb(49 26 0 / 16%);

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --content-max: 75rem;
  --content-reading: 45rem;
  --control-min-height: 2.75rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-text-primary: #fffaf4;
  --color-text-secondary: #ded5cc;
  --color-text-muted: #b3aaa1;
  --color-text-brand: #fffaf4;
  --color-text-inverse: var(--color-brand-brown);
  --color-surface-page: #21160c;
  --color-surface-subtle: #2a1c10;
  --color-surface-brand: #180d04;
  --color-border-default: #513b28;
  --color-border-strong: #705238;
  --color-action-primary: var(--color-brand-gold);
  --color-action-primary-text: var(--color-brand-brown);
  --color-action-primary-hover: #ffc665;
  --color-action-accent: #fffaf4;
  --color-focus: var(--color-brand-gold);
  --color-success-700: #91d5aa;
  --color-success-50: #173526;
  --color-warning-700: #ffd27a;
  --color-warning-50: #3c2a0c;
  --color-error-700: #ffaaa5;
  --color-error-50: #421c1a;
  --color-info-700: #9bd5f6;
  --color-info-50: #153142;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 32%);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 40%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}