:root {
  /* ---- Base palette (from brand brief, straight off the logo) ---- */
  --color-charcoal:      #1F1E1C;
  --color-charcoal-90:   #2B2A27;
  --color-olive:         #5B6438;
  --color-olive-dark:    #454B29;
  --color-olive-light:   #6E7845;
  --color-sage:          #9CA37A;
  --color-sage-light:    #C3C8AC;
  --color-stone:         #F5F3ED;
  --color-stone-dark:    #E9E5D9;
  --color-amber:         #C75B2B;
  --color-amber-dark:    #A64A22;
  --color-white:         #FFFFFF;

  /* status (kept out of primary palette; used sparingly for form/system feedback) */
  --color-success: #4B7A3F;
  --color-error:   #B23A2E;
  --color-warning: var(--color-amber);
  --color-info:    #3F6E8C;

  /* ---- Semantic aliases ---- */
  --surface-page:      var(--color-stone);
  --surface-card:      var(--color-white);
  --surface-sunken:    var(--color-stone-dark);
  --surface-inverse:   var(--color-charcoal);
  --surface-section-alt: var(--color-sage);

  --text-primary:      var(--color-charcoal);
  --text-secondary:    #55534C;
  --text-on-dark:      var(--color-stone);
  --text-on-olive:     var(--color-white);
  --text-link:         var(--color-olive);
  --text-link-hover:   var(--color-olive-dark);

  --brand-primary:     var(--color-olive);
  --brand-primary-hover: var(--color-olive-dark);
  --brand-primary-active: #3B4020;
  --brand-accent:      var(--color-amber);
  --brand-accent-hover: var(--color-amber-dark);
  --brand-accent-active: #8A3E1B;

  --border-default:    #DEDACD;
  --border-strong:     var(--color-charcoal);
  --border-focus:      var(--color-olive);

  --icon-default:      var(--color-charcoal);
  --icon-muted:        var(--color-sage);
  --icon-inverse:      var(--color-stone);
}