/*
  Sage Mist brand palette — design tokens
  Light theme, 9-color system
  Drop this file into your project and import it once globally.
*/

:root {
  /* Raw palette */
  --sage-mist: #8FA087;      /* 1 — main brand/accent */
  --warm-sand: #C9A067;      /* 2 — secondary accent */
  --deep-moss: #1D2420;      /* 3 — darkest text */
  --forest-ink: #374039;     /* 4 */
  --slate-sage: #5C6660;     /* 5 */
  --soft-sage-grey: #697369; /* 6 — lightest text, still AA-compliant */
  --sage-cloud: #E4E9E1;     /* 7 — darkest background */
  --sage-whisper: #F2F5F0;   /* 8 */
  --pure-white: #FFFFFF;     /* 9 — page background */

  /* Semantic aliases — reference these in components, not the raw names above */
  --color-brand: var(--sage-mist);
  --color-brand-hover: #7C9073;      /* ~10% darker, for button hover states */
  --color-accent: var(--warm-sand);

  --color-text-primary: var(--deep-moss);     /* headings */
  --color-text-secondary: var(--forest-ink);  /* body copy */
  --color-text-tertiary: var(--slate-sage);   /* captions, metadata */
  --color-text-muted: var(--soft-sage-grey);  /* placeholders, disabled */

  --color-bg-page: var(--pure-white);
  --color-bg-surface: var(--sage-whisper);    /* cards, sections */
  --color-bg-surface-alt: var(--sage-cloud);  /* nested/contrast surfaces */

  --color-border: #DCE3D9;   /* soft divider, sits between 7 and 8 */

  --radius: 8px;
  --font-sans: -apple-system, "Inter", "Segoe UI", sans-serif;
}