:root {
  /* Brand – amber */
  --color-primary-50: #fffcf6;
  --color-primary-100: #fff9f0;
  --color-primary-200: #fff1da;
  --color-primary-300: #fee5bc;
  --color-primary-400: #fbdca8;
  --color-primary-500: #fad18a;
  --color-primary-600: #f9c66b;
  --color-primary-700: #f8b734;
  --color-primary-800: #c78e23;
  --color-primary-900: #83521e;

  /* Warm neutrals */
  --color-gray-50: #fbfaf6;
  --color-gray-100: #f6f5f1;
  --color-gray-200: #e6e5e1;
  --color-gray-300: #d7d6d2;
  --color-gray-400: #a5a39c;
  --color-gray-500: #74726c;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #2c2c2c;
  --color-gray-900: #171717;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Roles */
  --color-background: var(--color-gray-100);
  --color-surface: var(--color-white);
  --color-text: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-heading: var(--color-gray-900);
  --color-accent: var(--color-primary-700);
  --color-border: var(--color-gray-200);
  --color-button-bg: var(--color-primary-700);
  --color-button-text: var(--color-primary-50);
  --color-badge-bg: #fef1d6;

  /* Type */
  --font-body: "Inter", Verdana, sans-serif;

  /* Radius */
  --radius-sm: 0.125rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;

  /* Layout */
  --container-max: 80rem;
  --page-padding: 2.5rem;
}