/* ============================================================
   DIRECTION A — "SAGE" (Earthy & Editorial)
   Warm paper backgrounds, deep forest greens, clay accent.
   This is the DEFAULT shipped theme (imported by styles.css).
   ============================================================ */
:root {
  /* --- raw palette --- */
  --sage-50:  #f6f4ec;
  --sage-100: #eef0e2;
  --sage-200: #dbe3c9;
  --sage-300: #b9c9a3;
  --sage-400: #93ab79;
  --sage-500: #6b8a54;
  --sage-600: #4f7040;
  --sage-700: #3a5730;
  --sage-800: #2f4527;
  --sage-900: #23331e;

  --forest-500: #2f5233;
  --forest-600: #244027;
  --forest-700: #1a2f1d;

  --clay-100: #dce8e6;
  --clay-300: #8fb8b3;
  --clay-500: #3f7d76;
  --clay-600: #33645f;
  --clay-700: #274d49;

  --cream-0:  #fbf9f3;
  --cream-50: #f6f3ea;
  --cream-100: #efeadb;

  --ink-900: #23301f;
  --ink-700: #3d4a38;
  --ink-500: #6b7563;

  --gold-500: #cf9a3e;
  --berry-500: #a13d4c;
  --sky-500: #4f7d8c;

  /* --- semantic aliases (used by components) --- */
  --color-bg: var(--cream-50);
  --color-bg-elevated: var(--cream-0);
  --color-bg-sunken: var(--sage-100);
  --color-bg-inverse: var(--forest-700);

  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-500);
  --color-text-inverse: var(--cream-0);
  --color-text-on-primary: var(--cream-0);

  --color-border: var(--sage-200);
  --color-border-strong: var(--sage-300);

  --color-primary: var(--forest-500);
  --color-primary-hover: var(--forest-600);
  --color-primary-active: var(--forest-700);
  --color-primary-contrast: var(--cream-0);

  --color-secondary: var(--sage-500);
  --color-secondary-hover: var(--sage-600);

  --color-accent: var(--clay-500);
  --color-accent-hover: var(--clay-600);

  --color-success: var(--forest-500);
  --color-warning: var(--gold-500);
  --color-error: var(--berry-500);
  --color-info: var(--sky-500);

  --color-link: var(--forest-600);
  --color-link-hover: var(--clay-600);

  --color-focus-ring: var(--clay-500);
  --color-scrim: rgba(35, 48, 31, 0.45);
}