/**
 * Modern ERP Theme CSS
 *
 * Reusable CSS file for modern SaaS ERP dashboard styling
 * Supports both light and dark modes
 *
 * Usage: Include this file in your page head after main stylesheets
 * <link rel="stylesheet" href="assets/css/modern-theme.css">
 */

/* ============================================
   CSS CUSTOM PROPERTIES (COLOR PALETTE)
   ============================================ */
:root {
  /* Primary Colors.
     SINGLE SOURCE OF TRUTH for the brand graphite. brand-theme.css derives
     its --brand-* aliases from these; do not redefine the hex there.

     #17191E is MYKA_PRO_INK in app/common/brand.php — the same graphite the
     Gate 07 wordmark is drawn in. It replaced the deep navy #102133, which
     predated the MYKA PRO identity and left the logo reading as a foreign
     object on its own interface.

     Near-black inverts the usual hover convention: the ramp LIFTS on hover
     (a blacker black is not a visible affordance) and DARKENS on press. */
  --erp-primary: #17191E;
  --erp-primary-hover: #24272F;
  --erp-primary-active: #0E1013;
  --erp-primary-light: #F0F0F2;
  --erp-primary-rgb: 23, 25, 30;
  --erp-accent-rgb: 214, 69, 47;

  /* Text Colors. De-blued against graphite: the previous values were the
     Tailwind slate ramp and carried a cast the brand ink does not have. */
  --erp-text-primary: #1F2126;
  --erp-text-muted: #6B6F78;
  --erp-text-light: #9A9DA6;

  /* Background Colors */
  --erp-bg-page: #F8F8F9;
  --erp-bg-card: #ffffff;
  --erp-bg-hover: #F8F8F9;
  --erp-bg-active: #F0F0F2;

  /* Border Colors */
  --erp-border: #E5E5E9;
  --erp-border-hover: #D3D3D8;

  /* Brand Accent — the product accent, shared with the sign-in page.
     These previously had NO design-system equivalent, which is why page authors
     reached for the un-branded blue that this project bans when they needed a
     highlight. The banned value itself is deliberately NOT written out here:
     §66.4 — the design validator greps raw file text for it, and a CSS comment
     cannot be stripped first, so naming it made the TOKEN REGISTRY report as a
     source of the very colour it exists to replace. The authoritative list is
     $BANNED_HEX in tools/validate_design.php.
     --erp-accent is the canonical highlight/accent for the product, and it is
     PRODUCT-SPECIFIC: this repository ships MYKA PRO TRENDS, so it carries the
     TRENDS crimson #D6452F from MYKA_PRO_PRODUCTS in app/common/brand.php. A
     sibling product (CONNECT, FRESH, TEAM) has its own accent — see the
     --erp-product-* block at the foot of this file.

     NOTE ON --erp-accent-contrast: white on #D6452F measures 4.42:1, which
     clears AA for large text and for UI component boundaries but sits just
     under the 4.5:1 normal-text threshold. The accent is a brand constant and
     is not adjusted to chase the ratio; small crimson-backed text should use
     --erp-accent-hover (#B3341F, 6.36:1) instead. */
  --erp-accent: #D6452F;
  --erp-accent-hover: #B3341F;
  --erp-accent-soft: rgba(214, 69, 47, 0.10);
  --erp-accent-border: rgba(214, 69, 47, 0.25);
  --erp-accent-contrast: #ffffff;

  /* Foreground for surfaces painted with --erp-primary.
     --erp-primary is THEME-STABLE (#17191E in both themes), so its foreground
     must be theme-stable too. --erp-accent-contrast cannot serve this role: it
     inverts (#ffffff light / #17191E dark) because it belongs to --erp-accent,
     and paired with --erp-primary it renders graphite-on-graphite in dark. */
  --erp-on-primary: #ffffff;

  /* Secondary categorical accent. Its ONE consumer is the 7th slot of
     tokenPalette() in public/assets/js/core/erp-chart.js — do NOT use it for
     status, that is what --erp-danger is for.

     It was the login "rose" #E5486B. That value is now within a few degrees of
     hue of --erp-accent, so in a chart the brand series and this one read as
     the same colour twice. Violet is the classic seventh categorical: distinct
     from graphite, crimson, info blue, success green, warning amber and
     danger red simultaneously. */
  --erp-accent-alt: #7C5CBF;
  --erp-accent-alt-hover: #664BA0;
  --erp-accent-alt-soft: rgba(124, 92, 191, 0.10);

  /* Status Colors */
  --erp-success: #059669;
  --erp-success-bg: #d1fae5;
  --erp-warning: #d97706;
  --erp-warning-bg: #fef3c7;
  --erp-danger: #dc2626;
  --erp-danger-bg: #fee2e2;
  --erp-info: #0284c7;
  --erp-info-bg: #F0F0F2;

  /* Shadows */
  --erp-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --erp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --erp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --erp-spacing-xs: 4px;
  --erp-spacing-sm: 8px;
  --erp-spacing-md: 12px;
  --erp-spacing-lg: 16px;
  --erp-spacing-xl: 24px;

  /* Border Radius */
  --erp-radius-sm: 6px;
  --erp-radius-md: 8px;

  /* Transitions */
  --erp-transition: all 0.2s ease;
  --erp-transition-slow: all 0.3s ease;

  /* ==========================================================
     TYPOGRAPHY  (added Phase 1 — DEFINED BUT NOT YET APPLIED)

     Only --erp-font-sans is wired up so far (it replaces the
     false "Plus Jakarta Sans" declaration in styles.css, which
     named a font that was never loaded). The scale below is
     declared for Phase 2 to adopt page by page; nothing consumes
     the size/weight/leading tokens yet, so adding them is inert.

     The scale collapses the 88 distinct font-size values found
     across views/ + includes/ into 8 steps. Mapping of what each
     step absorbs (observed value -> step):
       0.625 / 0.65  / 0.6875 / .68  -> --erp-text-2xs
       0.7   / 0.72  / 0.75          -> --erp-text-xs
       0.8   / 0.8125/ 0.85          -> --erp-text-sm    (workhorse)
       0.875 / 0.9   / 0.9375 / 0.95 -> --erp-text-base
       1     / 1.05  / 1.0625        -> --erp-text-md
       1.1   / 1.125 / 1.25          -> --erp-text-lg
       1.375 / 1.5                   -> --erp-text-xl
       2     / 2.5   / 3             -> --erp-text-display
     ========================================================== */

  /* Families. System-UI stack: no webfont request, all weights
     100-900 genuinely available (Segoe UI on Windows, SF on Apple),
     which the previous Arial fallback did not provide. Phase 2 may
     swap this for a brand typeface by changing this one line. */
  --erp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                   "Apple Color Emoji", "Segoe UI Emoji";
  --erp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                   Consolas, "Liberation Mono", monospace;
  /* Display face — deliberately aliased to --erp-font-sans for now.
     The sign-in page sets Open Sans for itself; committing the app to a
     display face is a Phase 2+ design decision, not a structural fix. */
  --erp-font-display: var(--erp-font-sans);

  /* Size scale */
  --erp-text-2xs: 0.6875rem;   /* 11px — micro labels, table sub-text  */
  --erp-text-xs: 0.75rem;      /* 12px — captions, meta, pill text     */
  --erp-text-sm: 0.8125rem;    /* 13px — dense body / list rows        */
  --erp-text-base: 0.875rem;   /* 14px — default body                  */
  --erp-text-md: 1rem;         /* 16px — emphasised body, card titles  */
  --erp-text-lg: 1.125rem;     /* 18px — section headings              */
  --erp-text-xl: 1.5rem;       /* 24px — page titles                   */
  --erp-text-display: 2rem;    /* 32px — KPI values, dashboard hero    */

  /* Weights. NOTE: styles.css redefines Bootstrap's .fw-bold to 500,
     so use these tokens rather than .fw-* utilities. */
  --erp-weight-normal: 400;
  --erp-weight-medium: 500;
  --erp-weight-semibold: 600;
  --erp-weight-bold: 700;

  /* Line heights */
  --erp-leading-tight: 1.25;   /* display / KPI numerals */
  --erp-leading-snug: 1.4;     /* headings               */
  --erp-leading-normal: 1.5;   /* body                   */
  --erp-leading-relaxed: 1.625;/* long-form prose        */

  /* Letter spacing */
  --erp-tracking-tight: -0.01em;
  --erp-tracking-normal: 0;
  --erp-tracking-wide: 0.07em; /* uppercase section captions */
}

/* Dark Mode Color Variables */
[data-bs-theme="dark"] {
  /* Primary Colors */
  --erp-primary: #17191E;
  --erp-primary-hover: #24272F;
  --erp-primary-active: #0E1013;
  --erp-primary-light: rgba(23, 25, 30, 0.2);
  --erp-primary-rgb: 23, 25, 30;
  --erp-accent-rgb: 233, 112, 91;   /* matches dark --erp-accent (#E9705B) */

  /* Text Colors. De-blued in step with the light ramp — these were the
     Tailwind slate scale, which reads navy beside graphite. */
  --erp-text-primary: #F1F2F4;
  --erp-text-muted: #9BA0AA;
  --erp-text-light: #6B707A;

  /* Background Colors. Neutral graphite surfaces, held at the luminance of
     the slate values they replace so the dark UI keeps its existing depth. */
  --erp-bg-page: #1E2025;
  --erp-bg-card: #1E2025;
  --erp-bg-hover: #141519;
  --erp-bg-active: rgba(23, 25, 30, 0.15);

  /* Border Colors */
  --erp-border: #34373E;
  --erp-border-hover: #474B54;

  /* Brand Accent — the TRENDS dark-surface lift from app/common/brand.php
     (accent_dark). Same hue, kept legible on a graphite ground. */
  --erp-accent: #E9705B;
  --erp-accent-hover: #D6452F;
  --erp-accent-soft: rgba(233, 112, 91, 0.16);
  --erp-accent-border: rgba(233, 112, 91, 0.32);
  --erp-accent-contrast: #17191E;

  /* Deliberately NOT inverted: --erp-primary is the same graphite in both
     themes, so the text on it stays white in both themes. */
  --erp-on-primary: #ffffff;

  --erp-accent-alt: #9B80D6;
  --erp-accent-alt-hover: #7C5CBF;
  --erp-accent-alt-soft: rgba(155, 128, 214, 0.16);

  /* Status Colors */
  --erp-success: #34d399;
  --erp-success-bg: rgba(5, 150, 105, 0.2);
  --erp-warning: #fbbf24;
  --erp-warning-bg: rgba(217, 119, 6, 0.2);
  --erp-danger: #f87171;
  --erp-danger-bg: rgba(220, 38, 38, 0.2);
  --erp-info: #60a5fa;
  --erp-info-bg: rgba(23, 25, 30, 0.15);

  /* Shadows */
  --erp-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --erp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --erp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ============================================
   PAGE LAYOUT
   ============================================ */
.erp-page-container {
  padding: var(--erp-spacing-xl);
  background-color: var(--erp-bg-page);
  min-height: 100vh;
}

[data-bs-theme="dark"] .erp-page-container {
  background-color: var(--erp-bg-page);
}

/* ============================================
   PAGE HEADER
   ============================================ */
.erp-page-header {
  margin-bottom: var(--erp-spacing-xl);
}

.erp-page-header-content {
  display: flex;
  align-items: center;
  gap: var(--erp-spacing-md);
  margin-bottom: var(--erp-spacing-sm);
}

.erp-page-icon {
  width: 40px;
  height: 40px;
  background-color: var(--erp-primary-light);
  border-radius: var(--erp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--erp-primary);
  font-size: 1.25rem;
}

.erp-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--erp-text-primary);
  margin: 0;
}

.erp-page-subtitle {
  font-size: 0.875rem;
  color: var(--erp-text-muted);
  margin: 0;
  margin-left: 52px;
}

/* ============================================
   CARDS
   ============================================ */
.erp-card {
  background-color: var(--erp-bg-card);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-sm);
  overflow: hidden;
  border: 1px solid transparent;
  transition: var(--erp-transition);
}

[data-bs-theme="dark"] .erp-card {
  border-color: var(--erp-border);
}

.erp-card-body {
  padding: var(--erp-spacing-xl);
}

.erp-card-sm {
  padding: var(--erp-spacing-lg);
}

.erp-item-card {
  background-color: var(--erp-bg-card);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-sm);
  padding: var(--erp-spacing-xl);
  margin-bottom: var(--erp-spacing-lg);
  cursor: pointer;
  transition: var(--erp-transition);
  border: 1px solid transparent;
}

.erp-item-card:hover {
  box-shadow: var(--erp-shadow-md);
  transform: translateY(-2px);
  border-color: var(--erp-border);
}

.erp-item-card:active {
  transform: translateY(0);
  box-shadow: var(--erp-shadow-sm);
}

[data-bs-theme="dark"] .erp-item-card {
  border-color: var(--erp-border);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.erp-heading {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--erp-text-primary);
  margin: 0;
}

.erp-heading-sm {
  font-size: 1rem;
  font-weight: 600;
  color: var(--erp-text-primary);
  margin: 0;
}

.erp-text {
  font-size: 0.875rem;
  color: var(--erp-text-primary);
  line-height: 1.5;
}

.erp-text-muted {
  font-size: 0.875rem;
  color: var(--erp-text-muted);
}

.erp-text-sm {
  font-size: 0.8125rem;
  color: var(--erp-text-muted);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.erp-input,
.erp-select {
  font-size: 0.875rem;
  padding: 8px 12px;
  border: 1px solid var(--erp-border);
  border-radius: var(--erp-radius-sm);
  color: var(--erp-text-primary);
  background-color: var(--erp-bg-card);
  transition: var(--erp-transition);
}

.erp-input:focus,
.erp-select:focus {
  border-color: var(--erp-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

[data-bs-theme="dark"] .erp-input:focus,
[data-bs-theme="dark"] .erp-select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.erp-input::placeholder {
  color: var(--erp-text-muted);
}

.erp-select option {
  background-color: var(--erp-bg-card);
  color: var(--erp-text-primary);
}

.erp-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.erp-search-input {
  padding-left: 40px;
}

.erp-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--erp-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

/* ============================================
   BUTTONS
   ============================================ */
.erp-btn {
  padding: 10px 20px;
  border-radius: var(--erp-radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--erp-transition);
  border: none;
  cursor: pointer;
}

.erp-btn-primary {
  background-color: var(--erp-primary);
  color: #ffffff;
}

.erp-btn-primary:hover {
  background-color: var(--erp-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.erp-btn-secondary {
  padding: 8px 12px;
  border: 1px solid var(--erp-border);
  background-color: var(--erp-bg-card);
  color: var(--erp-text-muted);
}

.erp-btn-secondary:hover {
  background-color: var(--erp-bg-hover);
  border-color: var(--erp-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .erp-btn-secondary {
  background-color: var(--erp-bg-card);
  border-color: var(--erp-border);
  color: var(--erp-text-muted);
}

[data-bs-theme="dark"] .erp-btn-secondary:hover {
  background-color: var(--erp-bg-hover);
  border-color: var(--erp-border-hover);
}

.erp-btn-icon {
  padding: 6px 10px;
  border: 1px solid var(--erp-border);
  background-color: var(--erp-bg-card);
  border-radius: var(--erp-radius-sm);
  font-size: 0.8125rem;
  transition: var(--erp-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.erp-btn-icon:hover {
  background-color: var(--erp-bg-hover);
  border-color: var(--erp-border-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .erp-btn-icon {
  background-color: var(--erp-bg-card);
  border-color: var(--erp-border);
}

[data-bs-theme="dark"] .erp-btn-icon:hover {
  background-color: var(--erp-bg-hover);
  border-color: var(--erp-border-hover);
}

/* ============================================
   BADGES
   ============================================ */
.erp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--erp-radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
}

.erp-badge-info {
  background-color: var(--erp-info-bg);
  color: var(--erp-info);
}

.erp-badge-success {
  background-color: var(--erp-success-bg);
  color: var(--erp-success);
}

.erp-badge-warning {
  background-color: var(--erp-warning-bg);
  color: var(--erp-warning);
}

.erp-badge-danger {
  background-color: var(--erp-danger-bg);
  color: var(--erp-danger);
}

.erp-badge-sm {
  padding: 4px 10px;
  font-size: 0.8125rem;
}

/* ============================================
   TABLES
   ============================================ */
.erp-table-wrapper {
  background-color: var(--erp-bg-card);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-sm);
  overflow: hidden;
}

[data-bs-theme="dark"] .erp-table-wrapper {
  border: 1px solid var(--erp-border);
}

.erp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.erp-table thead {
  background-color: var(--erp-bg-hover);
}

[data-bs-theme="dark"] .erp-table thead {
  background-color: #0f172a;
}

.erp-table thead tr {
  background-color: var(--erp-bg-hover);
}

[data-bs-theme="dark"] .erp-table thead tr {
  background-color: #0f172a !important;
}

.erp-table thead th {
  padding: 12px 16px;
  font-weight: 600;
  color: var(--erp-text-primary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--erp-border);
  text-align: left;
}

[data-bs-theme="dark"] .erp-table thead th {
  color: var(--erp-text-primary) !important;
  background-color: #0f172a !important;
  border-bottom-color: var(--erp-border) !important;
}

.erp-table tbody tr {
  border-bottom: 1px solid var(--erp-border);
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.erp-table tbody tr:hover {
  background-color: var(--erp-bg-hover);
}

.erp-table tbody tr.active,
.erp-table tbody tr.active:hover {
  background-color: var(--erp-bg-active);
}

[data-bs-theme="dark"] .erp-table tbody tr:hover {
  background-color: #0f172a;
}

[data-bs-theme="dark"] .erp-table tbody tr.active,
[data-bs-theme="dark"] .erp-table tbody tr.active:hover {
  background-color: var(--erp-bg-active);
}

.erp-table tbody td {
  padding: 16px;
  color: var(--erp-text-primary);
}

.erp-table tbody td strong {
  color: var(--erp-text-primary);
  font-weight: 600;
}

.erp-table tbody td small {
  color: var(--erp-text-muted);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.erp-empty-state {
  background-color: var(--erp-bg-card);
  border-radius: var(--erp-radius-md);
  box-shadow: var(--erp-shadow-sm);
  padding: 64px 24px;
  text-align: center;
}

[data-bs-theme="dark"] .erp-empty-state {
  border: 1px solid var(--erp-border);
}

.erp-empty-state-icon {
  font-size: 64px;
  color: var(--erp-text-light);
  opacity: 0.5;
  margin-bottom: var(--erp-spacing-lg);
  display: block;
}

[data-bs-theme="dark"] .erp-empty-state-icon {
  color: #475569;
}

.erp-empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--erp-text-muted);
  margin: 0 0 var(--erp-spacing-sm) 0;
}

[data-bs-theme="dark"] .erp-empty-state-title {
  color: var(--erp-text-primary);
}

.erp-empty-state-text {
  font-size: 0.875rem;
  color: var(--erp-text-light);
  margin: 0 0 var(--erp-spacing-xl) 0;
}

[data-bs-theme="dark"] .erp-empty-state-text {
  color: var(--erp-text-muted);
}

/* ============================================
   UTILITIES
   ============================================ */
.erp-flex-gap {
  gap: var(--erp-spacing-md);
}

.erp-flex-gap-sm {
  gap: var(--erp-spacing-sm);
}

.erp-flex-gap-lg {
  gap: var(--erp-spacing-lg);
}

.erp-mb-xl {
  margin-bottom: var(--erp-spacing-xl);
}

.erp-mb-lg {
  margin-bottom: var(--erp-spacing-lg);
}

.erp-mb-md {
  margin-bottom: var(--erp-spacing-md);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .erp-page-container {
    padding: var(--erp-spacing-lg) !important;
  }

  .erp-card-body,
  .erp-card-sm {
    padding: var(--erp-spacing-lg) !important;
  }

  .erp-item-card {
    padding: var(--erp-spacing-lg) !important;
  }

  .erp-search-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .erp-input,
  .erp-select {
    width: 100% !important;
  }

  .erp-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .erp-table {
    min-width: 800px;
  }

  .erp-page-subtitle {
    margin-left: 0;
  }
}

/* ============================================
   DARK MODE OVERRIDES FOR INLINE STYLES
   ============================================ */
[data-bs-theme="dark"] .container-fluid[style*="background-color: #f9fafb"] {
  background-color: var(--erp-bg-page) !important;
}

[data-bs-theme="dark"] [style*="background-color: #ffffff"] {
  background-color: var(--erp-bg-card) !important;
}

[data-bs-theme="dark"] [style*="color: #1f2937"] {
  color: var(--erp-text-primary) !important;
}

[data-bs-theme="dark"] [style*="color: #6b7280"] {
  color: var(--erp-text-muted) !important;
}

[data-bs-theme="dark"] [style*="color: #9ca3af"] {
  color: var(--erp-text-light) !important;
}

[data-bs-theme="dark"] [style*="background-color: #eff6ff"] {
  background-color: var(--erp-primary-light) !important;
}

[data-bs-theme="dark"] [style*="border-color: #e5e7eb"] {
  border-color: var(--erp-border) !important;
}

[data-bs-theme="dark"] [style*="border-bottom: 1px solid #e5e7eb"] {
  border-bottom-color: var(--erp-border) !important;
}

/* =========================================================
   MYKA PRO product accents

   The master brand ships four sibling products off one symbol and one
   wordmark; the accent is the only colour that separates them. These are the
   approved Gate 07 values and they belong here for the same reason every other
   colour does — this file is the token registry.

   Which one is active is NOT decided here. app/common/brand.php sets
   <html data-myka-product="…"> and the selectors below resolve
   --erp-brand-accent from it, so a sibling product changes one PHP constant
   and never edits CSS. --erp-brand-accent-dark is the lifted value for dark
   surfaces: same hue, restored contrast against the dark page background.
   ========================================================= */
:root {
  --erp-product-trends: #D6452F;
  --erp-product-connect: #2B59D8;
  --erp-product-fresh: #1E9E5C;
  --erp-product-team: #F0A81C;
  --erp-product-clinic: #0F766E;

  --erp-product-trends-dark: #E9705B;
  --erp-product-connect-dark: #6288EE;
  --erp-product-fresh-dark: #3EBD7C;
  --erp-product-team-dark: #F6BE4A;
  --erp-product-clinic-dark: #2DD4BF;

  /* Fallback if the data attribute is ever absent. */
  --erp-brand-accent: var(--erp-product-trends);
  --erp-brand-accent-dark: var(--erp-product-trends-dark);
}

[data-myka-product="clinic"] {
  --erp-brand-accent: var(--erp-product-clinic);
  --erp-brand-accent-dark: var(--erp-product-clinic-dark);
}
[data-myka-product="trends"] {
  --erp-brand-accent: var(--erp-product-trends);
  --erp-brand-accent-dark: var(--erp-product-trends-dark);
}
[data-myka-product="connect"] {
  --erp-brand-accent: var(--erp-product-connect);
  --erp-brand-accent-dark: var(--erp-product-connect-dark);
}
[data-myka-product="fresh"] {
  --erp-brand-accent: var(--erp-product-fresh);
  --erp-brand-accent-dark: var(--erp-product-fresh-dark);
}
[data-myka-product="team"] {
  --erp-brand-accent: var(--erp-product-team);
  --erp-brand-accent-dark: var(--erp-product-team-dark);
}

/* On dark surfaces the lifted value becomes the accent. */
[data-bs-theme="dark"] {
  --erp-brand-accent: var(--erp-brand-accent-dark);
}