:root {
  /* Base */
  --color-text:         #1E1E1E;  /* body text, near-black */
  --color-bg-dark:      #222222;  /* dark sections, loading, footer */
  --color-accent:       #FFC82C;  /* brand yellow: CTA dot, EN copy, hover */
  --color-ink:          #2F3631;  /* dark green-gray: borders, tabs, badges */
  --color-bg-gray:      #D9DAD9;  /* light gray section background */
  --color-text-muted:   #7A827D;  /* supplementary text (dates etc.) */
  --color-heading-sub:  #B9B9B9;  /* sub-headings (Statement label) */
  --color-white:        #ffffff;
  --border-translucent: rgb(185 185 185 / .7); /* button border on dark bg */

  /* Semantic aliases */
  --text-body:      var(--color-text);
  --text-muted:     var(--color-text-muted);
  --text-sub:       var(--color-heading-sub);
  --text-inverse:   var(--color-white);
  --surface-page:   var(--color-white);
  --surface-dark:   var(--color-bg-dark);
  --surface-sub:    var(--color-bg-gray);
  --accent:         var(--color-accent);
  --border-color:   var(--color-ink);
}