:root {
  /* ---- Brand core (from brief) ---- */
  --sage-bg: #F8F7F3;        /* Background */
  --sage-surface: #FFFFFF;   /* Surface */
  --sage-primary: #426B5A;   /* Primary */
  --sage-highlight: #DCE9DF; /* Highlight */
  --sage-ink: #293B35;       /* Text */

  /* ---- Primary scale ---- */
  --sage-50: #EEF4EF;
  --sage-100: #DCE9DF;
  --sage-200: #BCD3C3;
  --sage-300: #93B4A0;
  --sage-400: #6A917D;
  --sage-500: #426B5A;
  --sage-600: #375B4C;
  --sage-700: #2D4B3F;
  --sage-800: #233B32;

  /* ---- Warm neutrals (stone) ---- */
  --stone-0: #FFFFFF;
  --stone-50: #F8F7F3;
  --stone-100: #F1EFE8;
  --stone-150: #EAE7DE;
  --stone-200: #E2DED3;
  --stone-300: #CDC8BB;
  --stone-400: #8C8A80;
  --stone-500: #6B6E66;
  --stone-600: #525C56;
  --stone-700: #3B4843;
  --stone-900: #293B35;

  /* ---- Semantic (restrained) ---- */
  --success-fg: #2E6640;  --success-bg: #E4F0E5;  --success-border: #9CC3A4;
  --warning-fg: #7A5512;  --warning-bg: #F8EDD2;  --warning-border: #D8B566;
  --error-fg:   #9C3A2C;  --error-bg:   #F7E4DF;  --error-border:   #DFA196;
  --note-fg:    #3C5874;  --note-bg:    #E4EBF2;  --note-border:    #9DB2C8;  /* important contact notes */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--sage-bg);
  --bg-sunken: var(--stone-100);
  --surface-card: var(--sage-surface);
  --surface-raised: var(--sage-surface);
  --surface-muted: var(--stone-100);
  --surface-selected: var(--sage-highlight);
  --surface-hover: var(--stone-100);
  --surface-inverse: var(--sage-ink);

  --text-body: var(--sage-ink);         /* 11.4:1 on bg */
  --text-strong: #1E2D28;
  --text-secondary: var(--stone-600);   /* 6.5:1 on bg */
  --text-muted: var(--stone-500);       /* 5.0:1 on bg — minimum for any text */
  --text-on-primary: #FFFFFF;           /* 6.0:1 on primary */
  --text-on-selected: var(--sage-700);
  --text-link: var(--sage-600);
  --text-link-hover: var(--sage-800);

  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-control: var(--stone-400);   /* 3.4:1 — form controls meet non-text contrast */
  --border-strong: var(--stone-600);
  --border-selected: var(--sage-500);

  --action-primary: var(--sage-500);
  --action-primary-hover: var(--sage-600);
  --action-primary-pressed: var(--sage-700);
  --action-secondary-bg: var(--sage-surface);
  --action-secondary-hover: var(--sage-50);

  --focus-ring: #1F5F8B;                /* distinct from primary so focus is always visible */
  --avatar-warm-bg: #EFE3D3;
  --avatar-warm-fg: #5E4426;
  color-scheme: light;
}

/* Dark mode: chosen (data-theme="dark", from the theme cookie), or the system's when no choice is made. The two
   blocks hold the same values; ThemeTests keeps them so. */
:root[data-theme="dark"] {
  /* ---- Dark: the ramps turn over, so a tint that was light is now a dark one and every rule built on them follows ---- */
  --sage-bg: #151B19;
  --sage-surface: #1D2522;
  --sage-primary: #7FB096;
  --sage-highlight: #26392F;
  --sage-ink: #E4E9E5;

  --sage-50: #1C2622;
  --sage-100: #233329;
  --sage-200: #2E4537;
  --sage-300: #436553;
  --sage-400: #5F8A73;
  --sage-500: #7FB096;
  --sage-600: #96C2A9;
  --sage-700: #AFD3BE;
  --sage-800: #C9E3D3;

  --stone-0: #1D2522;
  --stone-50: #151B19;
  --stone-100: #222A27;
  --stone-150: #283130;
  --stone-200: #303A36;
  --stone-300: #3E4944;
  --stone-400: #6E7A74;
  --stone-500: #9AA39E;
  --stone-600: #B4BCB7;
  --stone-700: #CBD2CE;
  --stone-900: #E4E9E5;

  --success-fg: #8FD0A0;  --success-bg: #1B2E22;  --success-border: #2F5A3C;
  --warning-fg: #E8C374;  --warning-bg: #2E2614;  --warning-border: #6B5422;
  --error-fg:   #F0A595;  --error-bg:   #35201C;  --error-border:   #7A3B30;
  --note-fg:    #A9C3DE;  --note-bg:    #1C2733;  --note-border:    #3D5670;

  --surface-inverse: #33433D;           /* toasts and tooltips keep white text: 10.4:1 */
  --text-strong: #F2F5F3;
  --text-on-primary: #10201A;           /* 6.9:1 on primary */
  --focus-ring: #6FB1E0;                /* 7.5:1 on bg */
  --avatar-warm-bg: #3A2F22;
  --avatar-warm-fg: #EBCFA8;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.45);
  --overlay-scrim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ---- Dark: the ramps turn over, so a tint that was light is now a dark one and every rule built on them follows ---- */
    --sage-bg: #151B19;
    --sage-surface: #1D2522;
    --sage-primary: #7FB096;
    --sage-highlight: #26392F;
    --sage-ink: #E4E9E5;

    --sage-50: #1C2622;
    --sage-100: #233329;
    --sage-200: #2E4537;
    --sage-300: #436553;
    --sage-400: #5F8A73;
    --sage-500: #7FB096;
    --sage-600: #96C2A9;
    --sage-700: #AFD3BE;
    --sage-800: #C9E3D3;

    --stone-0: #1D2522;
    --stone-50: #151B19;
    --stone-100: #222A27;
    --stone-150: #283130;
    --stone-200: #303A36;
    --stone-300: #3E4944;
    --stone-400: #6E7A74;
    --stone-500: #9AA39E;
    --stone-600: #B4BCB7;
    --stone-700: #CBD2CE;
    --stone-900: #E4E9E5;

    --success-fg: #8FD0A0;  --success-bg: #1B2E22;  --success-border: #2F5A3C;
    --warning-fg: #E8C374;  --warning-bg: #2E2614;  --warning-border: #6B5422;
    --error-fg:   #F0A595;  --error-bg:   #35201C;  --error-border:   #7A3B30;
    --note-fg:    #A9C3DE;  --note-bg:    #1C2733;  --note-border:    #3D5670;

    --surface-inverse: #33433D;           /* toasts and tooltips keep white text: 10.4:1 */
    --text-strong: #F2F5F3;
    --text-on-primary: #10201A;           /* 6.9:1 on primary */
    --focus-ring: #6FB1E0;                /* 7.5:1 on bg */
    --avatar-warm-bg: #3A2F22;
    --avatar-warm-fg: #EBCFA8;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.45);
    --overlay-scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}