:root {
  /* ── Brand Colors ── */
  --brand-emerald-primary: #0F6B5B;
  --brand-emerald-dark:    #0A4F44;
  --brand-sage:            #7FAE9F;
  --brand-ivory:           #F6F4EE;

  /* Royal base — used for the sidebar gradient (dark emerald) */
  --royal-base: #0A4F44;

  /* ── Surface Tokens (Light Mode) ── */
  --surface-0: #F6F4EE;          /* warm ivory page bg */
  --surface-1: #FFFCF7;          /* card/panel bg */
  --surface-2: #EEF3F0;          /* subtle inset / stripe */
  --surface-3: #E4EDE8;          /* hover / selected bg */
  --surface-overlay: rgba(0, 0, 0, 0.45);

  /* ── Text Tokens (Light Mode) ── */
  --text-strong:   #1F2933;      /* charcoal */
  --text-normal:   #1F2933;
  --text-muted:    #52606D;      /* slate */
  --text-disabled: #9AA5B1;
  --text-on-accent: #ffffff;

  /* ── Border Tokens ── */
  --border-subtle: #D7E0DB;
  --border-normal: #BDD0C8;
  --border-strong: #9DB8AE;

  /* ── Accent Tokens (Emerald) ── */
  --accent:           #0F6B5B;
  --accent-strong:    #0A4F44;
  --accent-soft:      rgba(15, 107, 91, 0.10);
  --accent-soft-hover: rgba(15, 107, 91, 0.17);

  /* ── State Tokens ── */
  --success:      #1F8A70;
  --success-soft: rgba(31, 138, 112, 0.12);
  --warning:      #B7791F;
  --warning-soft: rgba(183, 121, 31, 0.12);
  --danger:       #C05656;
  --danger-soft:  rgba(192, 86, 86, 0.12);
  --info:         #2E7DB5;
  --info-soft:    rgba(46, 125, 181, 0.12);

  /* ── Elevation ── */
  --shadow-1: 0 1px 3px rgba(15, 107, 91, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 8px rgba(15, 107, 91, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 10px 20px rgba(15, 107, 91, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-4: 0 20px 30px rgba(15, 107, 91, 0.12), 0 10px 10px rgba(0, 0, 0, 0.04);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Spacing Scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ── Transitions ── */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Stack ── */
  --z-base:               0;
  --z-sticky:           100;
  --z-sidebar:         1000;
  --z-nav-mobile:      3000;
  --z-nav-dropdown:    4000;
  --z-nav-toggle:      4001;
  --z-panels:          5500;
  --z-modal-backdrop:  6900;
  --z-modal:           7000;
  --z-toast:           7100;
  --z-error-toast:     7200;
  --z-error-detail-modal: 7300;
}

[data-theme="dark"] {
  --royal-base: #0A4F44;

  --surface-0: #0d1a16;
  --surface-1: #132219;
  --surface-2: #1c2e24;
  --surface-3: #223830;
  --surface-overlay: rgba(0, 0, 0, 0.7);

  --text-strong:   #e3eeea;
  --text-normal:   #b5cdc6;
  --text-muted:    #7FAE9F;
  --text-disabled: #4a7066;
  --text-on-accent: #ffffff;

  --border-subtle: #1e3028;
  --border-normal: #2a4035;
  --border-strong: #3a5548;

  --accent:           #7FAE9F;
  --accent-strong:    #5F9488;
  --accent-soft:      rgba(127, 174, 159, 0.15);
  --accent-soft-hover: rgba(127, 174, 159, 0.25);

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.55), 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-4: 0 20px 30px rgba(0, 0, 0, 0.65), 0 10px 10px rgba(0, 0, 0, 0.5);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}