:root {
  /* ---------- Base palette ---------- */
  /* Void / char — pure black and deep grays */
  --char-1: #000000;
  --char-2: #111111;
  --char-3: #1a1a1a;
  --char-4: #222222;
  --char-5: #333333;

  /* Parchment / cream — pure white and light grays */
  --cream-1: #ffffff;
  --cream-2: #f2f2f2;
  --cream-3: #e6e6e6;
  --cream-4: #cccccc;
  --cream-5: #999999;

  /* Gold — the flashlight beam, the brand's signature warmth */
  --gold-1: #f0c869;
  --gold-2: #d4a94a;
  --gold-3: #b8892f;
  --gold-4: #8f6a24;

  /* Green — for navigation mono headers */
  --green-1: #4ade80;
  --green-2: #22c55e;
  --green-3: #16a34a;

  /* Ember — sunset orange, used sparingly for heat/urgency */
  --ember-1: #e0794a;
  --ember-2: #c1552c;
  --ember-3: #8f3e21;

  /* Smoke — the cool counterpoint (distant mountains, dusk sky) */
  --smoke-1: #7b8a92;
  --smoke-2: #566068;
  --smoke-3: #363e44;

  /* ---------- Semantic aliases ---------- */
  --bg-page: var(--char-1);
  --bg-page-white: var(--char-1);
  --bg-raised: var(--char-2);
  --bg-elevated: #ffffff;
  --bg-page-white: #ffffff;
  --bg-inset: var(--char-4);

  --text-primary: var(--cream-1);
  --text-secondary: var(--cream-2);
  --text-tertiary: var(--smoke-1);
  --text-on-gold: var(--char-1);

  --accent-primary: #ffffff;
  --accent-primary-hover: var(--cream-1);
  --accent-primary-active: var(--cream-2);
  --accent-secondary: var(--ember-2);
  --accent-secondary-hover: var(--ember-1);

  --border-hairline: rgba(246, 236, 217, 0.12);
  --border-hairline-strong: rgba(246, 236, 217, 0.22);
  --border-gold: rgba(212, 169, 74, 0.45);

  --focus-ring: var(--gold-1);

  --success: #7ba05b;
  --warning: #d4a94a;
  --danger: #c1552c;
}