:root {
  /* --- Primitives (single source of truth for repeated hex) --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-444: #444444;
  --color-neutral-3e: #3e3e3e;
  --color-neutral-cc: #cccccc;
  --color-neutral-e6: #e6e6e6;

  --bs-body-bg: #F5F5F5;
  --bs-body-color: var(--theme-primary-bg-color);
  --bs-border-color: #E8E8E8;

  /* Theme Colors */
  --theme-primary-bg-color: #090f16;
  --theme-primary-color: var(--color-white);

  --theme-secondary-bg-color: #44a541;
  --theme-secondary-color: var(--color-white);

  --theme-light-bg-color: #E2F0FF;
  --theme-light-color: var(--color-black);

  --theme-light-default-color: #c2cfdd;

  --theme-dark-bg-color: #292e32;
  --theme-dark-color: #5d5d5d;

  /* Top Header Colors */
  --theme-top-header-bg: var(--color-white);
  --theme-top-header-color: var(--theme-primary-bg-color);
  --theme-top-header-border-color: var(--bs-border-color);

  /* Nav Menu Bar Colors */
  --theme-nav-menu-bar-bg: var(--theme-primary-bg-color);
  --theme-nav-menu-bar-color: var(--color-white);
  --theme-nav-menu-bar-link-color: var(--color-white);
  --theme-nav-menu-bar-link-color-active: var(--color-white);
  --theme-nav-menu-bar-border-color-active: var(--color-white);

  /* Breadcrumb Colors */
  --theme-breadcrumb-bg: var(--color-white);
  --theme-breadcrumb-color: var(--theme-primary-bg-color);
  --theme-breadcrumb-color-hover: var(--theme-primary-bg-color);
  --theme-breadcrumb-border-color: var(--color-neutral-3e);

  /* Footer Colors */
  --theme-footer-bg: var(--theme-primary-bg-color);
  --theme-footer-color: var(--color-white);

  /* Dashboard Colors */
  --theme-gross-sales-bg: var(--color-neutral-444);
  --theme-gross-sales-bg-gradient: linear-gradient(0deg, rgba(68, 68, 68, 1) 0%, rgba(34, 34, 34, 1) 50%);
  --theme-gross-sales-border-color: var(--bs-border-color);
  --theme-gross-sales-color: var(--color-white);

  /* Theme surfaces (aliases) */
  --theme-first-bg-color: var(--color-black);
  --theme-first-color: var(--color-white);
  --app-page-background: #E5E5E5;
  --app-surface-gray: #f4f4f4;
  --app-sky-blue: #82A0C5;
  --app-dropdown-active-bg: #A4B8C3;
  --app-success-mint: #5FB89C;
  --app-info-accent: #4cabdb;
  --app-body-color: var(--theme-dark-color);
  --app-member-border-top: var(--theme-secondary-bg-color);
  --app-chat-online: var(--theme-secondary-bg-color);
  --app-chat-away: #e8a317;
  --app-text-placeholder-soft: #999999;
  --app-border-faint: var(--bs-border-color);

  /* Dark UI helpers (buttons, admin) */
  --app-dark-surface: var(--color-neutral-3e);
  --app-dark-surface-alt: var(--app-dark-surface);
  --app-dark-border: #555;
  --app-dark-muted-text: var(--color-neutral-cc);
  --app-dark-bg-page: #1a1d21;
  --app-dark-bg-panel: #212529;
  --app-dark-border-muted: #32383e;
  --app-dark-text: #ced4da;
  --app-dark-input-bg: #262a2f;
  --app-dark-hover-surface: #2a2d31;
  --app-dark-navbar-header: var(--theme-dark-bg-color);
  --app-dark-custom-wrap: #292e33;
  --app-dark-search-bg: #202328;
  --app-dark-selectize-mask: #2a2f34;
  --app-nav-overlay: rgba(225, 225, 225, 0.2);

  /* Admin / forms */
  --app-border-input: #e4e7ea;
  --app-surface-off-white: #FBFBFB;
  --app-border-divider: #D9D9D9;
  --app-table-header-soft: #f8fbfd;
  --app-table-row-border: var(--app-surface-gray);
  --app-access-head-blue: #e9ebed;
  --app-text-heading-muted: #585858;
  --app-text-label: #474747;
  --app-pm-tint: #D0E7F5;
  --app-pm-tint-alt: #B5DAEF;
  --app-commission-bg: #f8f8f8;
  --app-commission-blue-bg: #f0f8ff;
  --app-scrollbar-thumb: #666;
  --app-border-dd: #DDDDDD;
  --app-border-d6: #D6d6d6;
  --app-text-gray-89: #898989;
  --app-text-gray-9f: #9f9f9f;
  --app-link-blue: #009DE0;

  /* Misc surfaces (portal) */
  --app-border-ghost: #BABABA;
  --app-surface-f7: #F7F7F7;
  --app-border-d4: #D4D4D4;
  --app-border-f1: #F1F1F1;
  --app-border-ee: #EEEEEE;
  --app-surface-fafb: #FAFBFB;
  --app-border-bd: #BDBDBD;
  --app-border-f3: #f3f3f3;
  --app-surface-f0: #F0F0F0;
  --app-surface-f9: #f9f9f9;
  --app-text-hint: #acacac;
  --app-step-blue: #87A5C9;
  --app-panel-heading: #607794;
  --app-border-df: #DFDFDF;
  --app-text-7b: #7B7B7B;
  --app-text-8b: #8b98a6;
  --app-text-586: #586572;

  /* PRD preview / marketing */
  --app-prd-body: #39393A;
  --app-prd-link: #2A8AD5;
  --app-prd-orange: #f16621;
  --app-prd-border-hairline: var(--color-neutral-e6);
  --app-prd-tab-accent: #1e293b;
  --app-prd-btn-border: #CBCBCB;
  --app-prd-btn-hover-bg: #e7e7e7;
  --app-tab-subbar: var(--app-prd-btn-hover-bg);
  /* Brand status (single hex; alerts reuse these) */
  --app-brand-success: #05C192;
  --app-brand-success-dark: #03B589;
  --app-brand-danger: #EB6E6E;
  --app-brand-danger-dark: #D26262;
  --app-brand-warning: #FEC108;
  --app-brand-warning-dark: #EBB718;
  --app-alert-success-bg: var(--app-brand-success);
  --app-alert-warn-bg: var(--app-brand-warning);
  --app-alert-danger-bg: var(--app-brand-danger);
  --app-prd-orange-deep: #E2480C;
  --app-prd-green-bg: #2F9051;
  --app-prd-blue-bg: #0D74AE;
  --app-prd-navy-bg: #123c52;
  --app-prd-gray-bg: #f6f6f6;
  --app-text-blue-bright: #1081cf;
  --app-text-green-bright: #3cb778;
  --app-hero-rail-dark: #191919;
  --app-plan-nav-active: #202e5a;

  /* Extended app theme tokens (header/sidebar/chat/admin) */
  --app-black: var(--color-black);
  --app-sidebar-blue: #175377;
  --app-brand-blue: #104573;
  --app-nav-link-muted: #4f5467;
  --app-text-686: #686868;
  --app-text-808: #808080;
  --app-text-434: #434343;
  --app-text-828: #828282;
  --app-surface-f5: var(--bs-body-bg);
  --app-surface-f7-alt: var(--app-surface-f7);
  --app-skin-light-text: #676767;
  --app-text-333: #333;
  --app-surface-danger-soft: #FFE5E5;
  --app-surface-warning-soft: #FFFAEB;
  --app-dark-border-4d: #4d4d4d;
  --app-border-ed: #EDEDED;
  --app-dot-muted: #D8D8D8;
  --app-text-a2: #A2A2A2;
  --app-accent-orange: #dd8325;
  --app-chat-dark: #050606;
  --app-online-green: #2FD127;
  --app-text-737: #737373;
  --app-surface-e6: var(--color-neutral-e6);
  --app-surface-ea: #EAEAEA;
  --app-text-616: #616161;
  --app-green-6d: #6DBD16;
  --app-text-565: #565656;
  --app-border-eeef: #eeeff0;
  --app-border-ce: #CECECE;
  --app-surface-ec: #ECECEC;
  --app-gold-selected: #C8AF00;
  --app-dark-table-bg: #282b2e;
  --app-dark-menu-text: #7c7f90;
  --app-dark-surface-1d: #1d2023;
  --app-dark-spinner: #4e4d4d;
  --app-dark-item-hover: #333539;

  /* Admin header / UI hairlines */
  --app-border-ccc: var(--color-neutral-cc);
  --app-border-eee: #eeeeee;
  --app-text-777: #777777;
  --app-icon-muted: var(--color-neutral-444);
  --app-breadcrumb-text-dark: #dddddd;
  --app-notification-avatar-bg: #00c292;
}