:root {
  /* =========================================================
     Foundation / Reference Colors
     ========================================================= */

  /* Blue */
  --blue-50: #e6f2ff;
  --blue-100: #bddcff;
  --blue-200: #90c6ff;
  --blue-300: #64b0ff;
  --blue-400: #419eff;
  --blue-500: #1f8cff;
  --blue-600: #0b78f0;
  --blue-700: #0063d8;
  --blue-800: #004fb0;
  --blue-900: #003b88;

  /* Gray */
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e5e8ed;
  --gray-300: #d1d6dd;
  --gray-400: #b0b8c4;
  --gray-500: #8b95a5;
  --gray-600: #6c7689;
  --gray-700: #515969;
  --gray-800: #383e4a;
  --gray-900: #1f2329;

  /* Wood */
  --wood-50: #f8f6f3;
  --wood-100: #ebe5dd;
  --wood-200: #d8cdbf;
  --wood-300: #c4b5a1;
  --wood-400: #b09b83;
  --wood-500: #9c8366;
  --wood-600: #86714e;
  --wood-700: #6e5c3e;
  --wood-800: #55452e;
  --wood-900: #3d321f;

  /* Orange */
  --orange-50: #fff4e8;
  --orange-100: #ffe2c2;
  --orange-200: #ffca91;
  --orange-300: #fdb462;
  --orange-400: #f6ad55;
  --orange-500: #ed8936;
  --orange-600: #dd6b20;
  --orange-700: #c05621;
  --orange-800: #9c461b;
  --orange-900: #7c3716;

  /* Red */
  --red-50: #fff0f0;
  --red-100: #ffd7d7;
  --red-200: #ffb0b0;
  --red-300: #ff8686;
  --red-400: #f97070;
  --red-500: #e53e3e;
  --red-600: #c53030;
  --red-700: #9b2c2c;
  --red-800: #822727;
  --red-900: #661f1f;

  /* Yellow */
  --yellow-50: #fffce8;
  --yellow-100: #fff4b8;
  --yellow-200: #ffea84;
  --yellow-300: #f6dc63;
  --yellow-400: #f0d24f;
  --yellow-500: #ecc94b;
  --yellow-600: #d69e2e;
  --yellow-700: #b7791f;
  --yellow-800: #975f13;
  --yellow-900: #7a4a0f;

  /* Green */
  --green-50: #ecfbf4;
  --green-100: #d4f4e2;
  --green-200: #b5e8cd;
  --green-300: #6ecfa2;
  --green-400: #48bb78;
  --green-500: #38a169;
  --green-600: #2f855a;
  --green-700: #276749;
  --green-800: #1f5139;
  --green-900: #173d2b;

  /* Teal */
  --teal-50: #ebfcfa;
  --teal-100: #cff6f1;
  --teal-200: #81e6d9;
  --teal-300: #4fd1c5;
  --teal-400: #35c0b7;
  --teal-500: #38b2ac;
  --teal-600: #319795;
  --teal-700: #2c7a7b;
  --teal-800: #235f62;
  --teal-900: #1b494b;

  /* Purple */
  --purple-50: #f4f0ff;
  --purple-100: #e3d8fb;
  --purple-200: #ceb8f7;
  --purple-300: #af90e9;
  --purple-400: #9a72de;
  --purple-500: #805ad5;
  --purple-600: #6b46c1;
  --purple-700: #553c9a;
  --purple-800: #44307a;
  --purple-900: #33245c;

  /* =========================================================
     Core Semantic Colors
     ========================================================= */

  --primary-color: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-active: var(--blue-800);
  --secondary-color: var(--blue-300);
  --secondary-hover: var(--blue-400);
  --secondary-active: var(--blue-500);

  --success-color: var(--green-500);
  --success-bg: var(--green-50);
  --success-border: var(--green-200);
  --success-text: var(--green-800);

  --error-color: var(--red-500);
  --error-bg: var(--red-50);
  --error-border: var(--red-200);
  --error-text: var(--red-800);

  --warning-color: var(--yellow-500);
  --warning-bg: var(--yellow-50);
  --warning-border: var(--yellow-200);
  --warning-text: var(--yellow-900);

  --info-color: var(--teal-500);
  --info-bg: var(--teal-50);
  --info-border: var(--teal-200);
  --info-text: var(--teal-800);

  /* =========================================================
     Status Colors
     ========================================================= */

  --status-online: var(--green-500);
  --status-busy: var(--orange-500);
  --status-dnd: var(--red-500);
  --status-away: var(--yellow-500);
  --status-offline: var(--gray-500);

  /* =========================================================
     Text, Surfaces, Borders
     ========================================================= */

  --text-color: var(--gray-900);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: #ffffff;

  --background-color: var(--gray-50);
  --background-subtle: var(--gray-100);
  --background-muted: var(--gray-200);

  --surface-color: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: var(--gray-50);
  --surface-muted: var(--gray-100);
  --surface-inset: var(--gray-200);

  --border-color: var(--gray-300);
  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-400);
  --divider-color: var(--gray-200);

  --focus-color: var(--blue-500);
  --focus-ring: rgba(31, 140, 255, 0.28);

  --overlay-color: rgba(31, 35, 41, 0.5);
  --shadow-color: rgba(31, 35, 41, 0.12);

  /* =========================================================
     Brand / Accent
     ========================================================= */

  --brand-color: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-active: var(--blue-800);
  --brand-soft: var(--blue-50);
  --brand-soft-border: var(--blue-200);

  --accent-orange: var(--orange-500);
  --accent-orange-semitransparent: rgba(237, 137, 54, 0.2);
  --accent-red: var(--red-500);
  --accent-yellow: var(--yellow-500);
  --accent-purple: var(--purple-500);
  --accent-teal: var(--teal-500);
  --accent-green: var(--green-500);

  --icon-green: var(--green-500);
  --icon-red: var(--red-500);
  --highlight-color: var(--accent-orange);

  /* =========================================================
     Page Theme Colors (mapped from palette)
     ========================================================= */

  --cream: var(--wood-50);
  --ink: var(--gray-900);
  --ink-mid: var(--gray-700);
  --ink-soft: var(--gray-500);
  --accent: var(--teal-600);

  /* Module colors */
  --col-contacts: var(--green-500);
  --col-staff: var(--orange-500);
  --col-calendar: var(--blue-500);
  --col-chat: var(--blue-400);
  --col-templates: var(--purple-400);
  --col-pdf: var(--purple-500);
  --col-forms: var(--yellow-500);
  --col-automation: var(--green-500);
  --col-ai: var(--teal-400);
}