:root {
  --sage-sage: #93A58E;
  --sage-stone: #F2F0E9;
  --sage-chalk: #FAF9F5;
  --sage-charcoal: #343B35;
  --sage-action: #50634F;
  --sage-action-hover: #435442;
  --sage-light-surface: #E8E7DF;
  --sage-dark-background: #202620;
  --sage-dark-surface: #2C342D;
  --sage-dark-link: #B6C7AF;
  --sage-muted: #616A61;
  --sage-on-sage: #202620;
  --brand-background: var(--sage-stone);
  --brand-surface: var(--sage-chalk);
  --brand-text: var(--sage-charcoal);
  --brand-muted: var(--sage-muted);
  --brand-link: var(--sage-action);
  --brand-button: var(--sage-action);
  --brand-on-button: var(--sage-chalk);
  --brand-focus: var(--sage-charcoal);
  --brand-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="dark"] {
  color-scheme: dark;
  --brand-background: var(--sage-dark-background);
  --brand-surface: var(--sage-dark-surface);
  --brand-text: var(--sage-chalk);
  --brand-muted: var(--sage-dark-link);
  --brand-link: var(--sage-dark-link);
  --brand-focus: var(--sage-chalk);
}
/* Apply these semantic tokens to your website's existing components.
   Use the on-sage color for body text on a soft sage panel. */