:root {
  /* Base */
  --color-bg: #201E1B;              /* page background, lighter warm black */
  --color-surface: #29261F;         /* card / raised surface */
  --color-border: #34302A;          /* subtle borders, dividers */
  --color-border-strong: #4A453C;   /* hover state borders */

  /* Text */
  --color-text: #F4F0E7;            /* primary text, warm off-white */
  --color-text-secondary: #948C7E;  /* muted body/secondary text */
  --color-text-muted: #6B6459;      /* least prominent text, e.g. domain labels */

  /* Accent */
  --color-accent: #D9772E;          /* amber, the single accent colour */
  --color-accent-text: #2A1608;     /* dark text for use on amber fills */

  /* Fonts */
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing (loose scale, adjust as needed once real content is in) */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
}