:root {
  /* ── Brand primitives ───────────────────────────── */
  --color-red:        #B53828;
  --color-black:      #0f0f0f;
  --color-white:      #ffffff;
  --color-navy:       #1a1f2e;
  --color-olive:      #2a3018;

  /* ── Gray scale ─────────────────────────────────── */
  --color-gray-950:   #111111;
  --color-gray-900:   #1a1a1a;
  --color-gray-700:   #333333;
  --color-gray-600:   #555555;
  --color-gray-500:   #777777;
  --color-gray-400:   #999999;
  --color-gray-300:   #bbbbbb;
  --color-gray-200:   #dddddd;
  --color-gray-100:   #eeeeee;
  --color-gray-50:    #f5f5f5;

  /* ── Semantic text ───────────────────────────────── */
  --color-text-primary:    var(--color-gray-950);
  --color-text-secondary:  var(--color-gray-600);
  --color-text-muted:      var(--color-gray-400);
  --color-text-inverse:    var(--color-white);
  --color-text-accent:     var(--color-red);

  /* ── Semantic surfaces ───────────────────────────── */
  --color-surface-primary:   var(--color-white);
  --color-surface-secondary: var(--color-gray-50);
  --color-surface-dark:      var(--color-gray-950);
  --color-surface-navy:      var(--color-navy);
  --color-surface-olive:     var(--color-olive);
  --color-surface-accent:    var(--color-red);

  /* ── Rules + borders ─────────────────────────────── */
  --color-rule-red:      var(--color-red);
  --color-rule-neutral:  var(--color-gray-200);
  --color-rule-black:    var(--color-gray-950);
  --color-border:        var(--color-gray-200);
  --color-border-dark:   var(--color-gray-700);
}