:root {
  color-scheme: light dark;

  /* Color */
  --color-brand: #c64137;
  --color-brand-secondary: #f96100;
  --color-brand-ink: #4a0f0a;
  --color-bg: light-dark(oklch(99% 0 0), oklch(18% 0 0));
  --color-surface: light-dark(oklch(96% 0 0), oklch(23% 0 0));
  --color-text: light-dark(oklch(22% 0 0), oklch(93% 0 0));
  --color-text-muted: light-dark(oklch(45% 0 0), oklch(70% 0 0));
  --color-border: light-dark(oklch(88% 0 0), oklch(32% 0 0));
  --color-accent: light-dark(oklch(52% 0.18 255), oklch(72% 0.14 255));
  --color-accent-contrast: light-dark(oklch(99% 0 0), oklch(18% 0 0));
  --color-focus: var(--color-accent);

  /* Typography */
  --font-display: "Josefin Sans", system-ui, sans-serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  --leading-tight: 1.15;
  --leading-normal: 1.6;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2rem + 5vw, 6rem);

  /* Layout */
  --container-max: 72rem;
  --container-narrow: 42rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-height: 4rem;

  /* Shape & motion */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-full: 999px;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}