:root {
  /* Brand + semantic color tokens */
  --color-brand-50: #fff7ed;
  --color-brand-100: #ffedd5;
  --color-brand-200: #fed7aa;
  --color-brand-300: #fdba74;
  --color-brand-400: #fb923c;
  --color-brand-500: #f97316;
  --color-brand-600: #ea580c;
  --color-brand-700: #c2410c;
  --color-brand-800: #9a3412;

  --color-primary: var(--color-brand-600);
  --color-primary-dark: var(--color-brand-700);
  --color-primary-light: var(--color-brand-100);
  --color-accent: #d97706;

  --color-success: #15803d;
  --color-success-light: #dcfce7;
  --color-warning: #b45309;
  --color-warning-light: #fef3c7;
  --color-error: #b91c1c;
  --color-error-light: #fee2e2;

  --text: #292524;
  --text-h: #1c1917;
  --text-dim: #57534e;

  --bg: #fffaf5;
  --bg-alt: #fef3e8;
  --surface: #ffffff;
  --surface-muted: #fff8f1;
  --border: #efdcca;
  --code-bg: #f8eadb;

  /* Typography tokens */
  --sans: "Inter", "Manrope", system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --heading: "Fraunces", "Inter", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing + radius tokens */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Elevation + focus tokens */
  --shadow-subtle: 0 1px 2px rgba(28, 25, 23, 0.08);
  --card-shadow: 0 8px 24px rgba(120, 53, 15, 0.12);
  --shadow-hover: 0 14px 32px rgba(120, 53, 15, 0.18);
  --focus-ring: 0 0 0 3px rgba(234, 88, 12, 0.26);

  --surface-gradient:
    radial-gradient(1000px 420px at -10% -10%, rgba(249, 115, 22, 0.14), transparent 58%),
    radial-gradient(760px 360px at 110% -8%, rgba(217, 119, 6, 0.1), transparent 52%),
    linear-gradient(180deg, #fffaf5 0%, #fef3e8 100%);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #f5f5f4;
    --text-h: #fafaf9;
    --text-dim: #d6d3d1;

    --bg: #1c1917;
    --bg-alt: #292524;
    --surface: #26211e;
    --surface-muted: #322b26;
    --border: #4a3d31;
    --code-bg: #3f3228;

    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.32);
    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
    --shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.55);

    --surface-gradient:
      radial-gradient(900px 380px at 0% -5%, rgba(249, 115, 22, 0.22), transparent 60%),
      radial-gradient(760px 360px at 110% -8%, rgba(217, 119, 6, 0.2), transparent 56%),
      linear-gradient(180deg, #1c1917 0%, #292524 100%);
  }
}
