:root {
  /* ============ Palette — brand order: orange · schwarz · muted · white · secondary ============ */

  /* 1. Orange — the accent. NOT the foundation; only energy strokes,
     emphasis and the main CTA. */
  --color-orange-600: #ff4000;
  --color-accent: var(--color-orange-600);
  --color-on-accent: var(--color-white);

  /* 2. Schwarz — text on white (used most often). */
  --color-ink: #0a0a0a;

  /* 3. Muted — the second text style on white. */
  --color-muted: #a5a5a5;

  /* 4. White — text on dark. */
  --color-white: #ffffff;

  /* 5. Secondary — ONE use case: cards on dark surfaces. Not a text color. */
  --color-secondary: #5d5d5d;

  /* Supporting neutrals */
  --color-black: #000000;        /* dark section surface — pure black */
  --color-border: #e6e6e6;       /* hairline border */
  --color-bg-page: #f1f2f1;      /* grey page background */
  --color-elevated-dark: #242424;   /* card fill lifted off pure-black sections (one step up from ink) */
  --color-icon-well: #f2f2f2;    /* soft grey disc behind a small icon */

  /* ============ Text roles ============ */
  --text-heading: var(--color-ink);
  --text-body: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-on-dark: var(--color-white);

  /* ============ Surfaces — white (default section), black (dark section), grey (page) ============ */
  --surface-white: var(--color-white);       /* default section — pure white */
  --surface-dark: var(--color-black);        /* dark section — pure black */
  --surface-page: var(--color-bg-page);      /* page background — grey */
  --surface-card-dark: var(--color-secondary); /* cards on dark sections */
  --surface-card-elevated-dark: var(--color-elevated-dark); /* elevated content cards on black (testimonials) */

  --border-default: var(--color-border);
  --border-dark: var(--color-black);
}