/* ═══════════════════════════════════════════════════════════════════
   ERP THEME — Shopify Editions Winter 2024 inspired
   ═══════════════════════════════════════════════════════════════════
   Light: Lavender-blue tones (#e6ebf4 base), soft purple accents
   Dark: Deep purple-black (#06040d base), lavender text, mono font feel
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* RGB channel variables — use with rgba(var(--name), opacity) */
  --erp-black-rgb:          0, 0, 0;
  --erp-white-rgb:          255, 255, 255;
  --erp-primary-deep-rgb:   61, 82, 160;
  --erp-primary-glow-rgb:   112, 145, 230;
  --erp-shadow-tint-rgb:    39, 41, 59;
  --erp-muted-glow-rgb:     134, 151, 196;
  --erp-glass-tint-rgb:     220, 227, 254;
  --erp-glass-border-rgb:   61, 82, 160;
  --erp-surface-glass-rgb:  255, 255, 255;
  --erp-danger-rgb:         239, 68, 68;
  --erp-success-rgb:        16, 185, 129;
  --erp-warning-rgb:        245, 158, 11;
  --erp-info-blue-rgb:      59, 130, 246;

  /* Glass */
  --erp-glass:          rgba(var(--erp-glass-tint-rgb), 0.5);
  --erp-glass-strong:   rgba(var(--erp-surface-glass-rgb), 0.82);
  --erp-glass-border:   rgba(var(--erp-primary-deep-rgb), 0.06);
  --erp-glass-shadow:   0 1px 2px rgba(var(--erp-primary-deep-rgb), 0.04), 0 4px 12px rgba(var(--erp-primary-deep-rgb), 0.03);
  --erp-glass-blur:     20px;

  /* Surfaces — lavender-tinted warmth */
  --erp-bg:             #faf9fc;    /* Cards, panels — warm white          */
  --erp-bg-page:        #f0eff6;    /* Page background — hint of lavender  */
  --erp-bg-muted:       #e8e6f0;    /* Hover, zebra — lavender-gray        */
  --erp-bg-accent:      #d0d6e2;    /* Stronger muted — light blue-gray   */

  /* Text — deep blue navy */
  --erp-text:           #2a2d45;    /* Primary headings — dark navy       */
  --erp-text-medium:    #3D52A0;    /* Body text — uses primary blue      */
  --erp-text-secondary: #3e4a65;    /* Labels / inactive nav — dark       */
  --erp-text-tertiary:  #556178;    /* Placeholder / group labels — solid */
  --erp-text-faint:     #8895aa;    /* Faint — dots, separators           */

  /* Borders — blue-tinted grays */
  --erp-border:         #d8dfe8;    /* Default borders — clean light      */
  --erp-border-strong:  #bcc5d4;    /* Hover borders — muted blue-gray    */
  --erp-border-row:     #edf0f5;    /* Table row separators               */

  /* Primary — deep blue from screenshot */
  --erp-primary:        #3D52A0;    /* Buttons — deep blue                */
  --erp-primary-fg:     #ffffff;    /* Text on primary                    */
  --erp-primary-hover:  #324690;    /* Hover — slightly darker            */
  --erp-primary-ring:   rgba(var(--erp-primary-glow-rgb), 0.3);
  --erp-primary-light:  #dce2fa;    /* Light blue tint                    */

  /* Semantic: Success */
  --erp-success-bg:     #ecfdf5;
  --erp-success-bg-solid:#10b981;
  --erp-success-bg-dark:#059669;
  --erp-success-border: #a7f3d0;
  --erp-success-text:   #047857;
  --erp-success-icon:   #10b981;
  --erp-success-light:  #34d399;

  /* Semantic: Warning */
  --erp-warning-bg:     #fffbeb;
  --erp-warning-bg-solid:#f59e0b;
  --erp-warning-bg-dark:#d97706;
  --erp-warning-border: #fde68a;
  --erp-warning-text:   #b45309;
  --erp-warning-icon:   #f59e0b;

  /* Semantic: Danger */
  --erp-danger-bg:      #fef2f2;
  --erp-danger-bg-solid:#ef4444;
  --erp-danger-bg-dark: #dc2626;
  --erp-danger-border:  #fecaca;
  --erp-danger-text:    #b91c1c;
  --erp-danger-icon:    #ef4444;
  --erp-danger-light:   #f87171;
  --erp-danger-strong:  #991b1b;

  /* Semantic: Info — uses theme blue */
  --erp-info-bg:        #edf0fa;
  --erp-info-bg-mid:    #dce2f5;
  --erp-info-bg-solid:  #7091E6;
  --erp-info-bg-dark:   #3D52A0;
  --erp-info-border:    #ADBBDA;
  --erp-info-text:      #3D52A0;
  --erp-info-icon:      #3b82f6;
  --erp-info-light:     #60a5fa;

  /* Semantic: Accent — blue from palette */
  --erp-accent-bg:      #dce2fa;
  --erp-accent-bg-mid:  #e0d5f5;
  --erp-accent-border:  #ADBBDA;
  --erp-accent-text:    #3D52A0;
  --erp-accent-icon:    #7091E6;
  --erp-accent-light:   #8697C4;

  /* Scrollbar */
  --erp-scrollbar:      #dde2ed;
  --erp-scrollbar-hover:#b5bdd0;

  /* Shadows — layered depth with blue tint */
  --erp-shadow-sm:      0 1px 2px rgba(var(--erp-primary-deep-rgb), 0.04), 0 1px 4px rgba(var(--erp-primary-deep-rgb), 0.02);
  --erp-shadow-lg:      0 2px 4px rgba(var(--erp-primary-deep-rgb), 0.04), 0 8px 16px rgba(var(--erp-primary-deep-rgb), 0.04);
  --erp-shadow-xl:      0 2px 4px rgba(var(--erp-primary-deep-rgb), 0.03), 0 12px 32px rgba(var(--erp-primary-deep-rgb), 0.06);

  /* Overlay */
  --erp-overlay:        rgba(var(--erp-shadow-tint-rgb), 0.5);

  /* Gradient */
  --erp-gradient-from:  #ffffff;

  /* Button gradient */
  --erp-primary-gradient: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.08) 100%);

  /* ─── Design Tokens ─── */

  /* Typography */
  --erp-font-size-2xs: 0.625rem;
  --erp-font-size-xs:  0.75rem;
  --erp-font-size-sm:  0.875rem;
  --erp-font-size-base: 1rem;
  --erp-font-size-lg:  1.125rem;
  --erp-font-size-xl:  1.25rem;
  --erp-font-size-2xl: 1.5rem;
  --erp-font-size-3xl: 1.875rem;
  --erp-line-height-tight:   1.25;
  --erp-line-height-normal:  1.5;
  --erp-line-height-relaxed: 1.75;

  /* Spacing */
  --erp-space-0: 0;
  --erp-space-1: 0.25rem;
  --erp-space-2: 0.5rem;
  --erp-space-3: 0.75rem;
  --erp-space-4: 1rem;
  --erp-space-5: 1.25rem;
  --erp-space-6: 1.5rem;
  --erp-space-8: 2rem;
  --erp-space-10: 2.5rem;
  --erp-space-12: 3rem;

  /* Border radius */
  --erp-radius-sm:   0.25rem;
  --erp-radius-md:   0.375rem;
  --erp-radius-lg:   0.5rem;
  --erp-radius-xl:   0.75rem;
  --erp-radius-2xl:  1rem;
  --erp-radius-full: 9999px;

  /* Z-index scale */
  --erp-z-dropdown:  50;
  --erp-z-sticky:    100;
  --erp-z-fixed:     200;
  --erp-z-overlay:   300;
  --erp-z-modal:     400;
  --erp-z-popover:   500;
  --erp-z-toast:     600;
  --erp-z-tooltip:   700;

  /* Animation & transitions */
  --erp-duration-fast:    150ms;
  --erp-duration-normal:  300ms;
  --erp-duration-slow:    500ms;
  --erp-ease-default:     cubic-bezier(0.4, 0, 0.2, 1);
  --erp-ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --erp-ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --erp-ease-spring:      cubic-bezier(0.22, 1, 0.36, 1);
  --erp-ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Component sizing */
  --erp-input-height-sm: 2rem;
  --erp-input-height-md: 2.25rem;
  --erp-input-height-lg: 2.75rem;
  --erp-btn-height-sm:   2rem;
  --erp-btn-height-md:   2.25rem;
  --erp-btn-height-lg:   2.75rem;

  /* Chart color palette */
  --erp-chart-1: #3D52A0;
  --erp-chart-2: #7091E6;
  --erp-chart-3: #10b981;
  --erp-chart-4: #f59e0b;
  --erp-chart-5: #ef4444;
  --erp-chart-6: #8b5cf6;
  --erp-chart-7: #06b6d4;
  --erp-chart-8: #8697C4;
  --erp-chart-1-light: #7091E6;
  --erp-chart-2-light: #93c5fd;
  --erp-chart-3-light: #6ee7b7;
  --erp-chart-4-light: #fcd34d;
  --erp-chart-5-light: #fca5a5;
  --erp-chart-6-light: #c4b5fd;
  --erp-chart-7-light: #67e8f9;
  --erp-chart-8-light: #ADBBDA;
  --erp-chart-label: #8697C4;
  --erp-chart-grid: rgba(134, 151, 196, 0.06);
  --erp-chart-border: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */
html.dark {
  /* RGB channel overrides — plum/purple palette
     #fbfafb  near-white text
     #86819e  muted purple-gray
     #625d73  medium purple-gray
     #594ba0  vibrant purple (primary)
     #41394f  dark purple-gray (cards)
     #261f32  deepest plum (page bg)
  */
  --erp-black-rgb:          0, 0, 0;
  --erp-white-rgb:          255, 255, 255;
  --erp-primary-deep-rgb:   89, 75, 160;     /* #594ba0 */
  --erp-primary-glow-rgb:   127, 110, 200;   /* lighter purple glow */
  --erp-shadow-tint-rgb:    46, 38, 64;      /* #2e2640 */
  --erp-muted-glow-rgb:     144, 138, 170;   /* #908aaa */
  --erp-glass-tint-rgb:     59, 52, 80;      /* #3b3450 */
  --erp-glass-border-rgb:   117, 109, 142;   /* #756d8e */
  --erp-surface-glass-rgb:  74, 66, 98;      /* #4a4262 */

  /* Glass — plum glassmorphism with ambient glow */
  --erp-glass:          rgba(var(--erp-glass-tint-rgb), 0.4);
  --erp-glass-strong:   rgba(var(--erp-surface-glass-rgb), 0.65);
  --erp-glass-border:   rgba(var(--erp-white-rgb), 0.1);
  --erp-glass-shadow:   0 0 16px rgba(var(--erp-primary-glow-rgb), 0.04), 0 2px 8px rgba(var(--erp-black-rgb), 0.15);
  --erp-glass-blur:     20px;

  /* Surfaces — deep plum palette */
  --erp-bg:             #3b3450;    /* Cards — lifted from page            */
  --erp-bg-page:        #2e2640;    /* Page background — deepest plum      */
  --erp-bg-muted:       #4a4262;    /* Hover / icon containers — visible   */
  --erp-bg-accent:      #5a5278;    /* Selected, active — pops             */

  /* Text — high contrast on deep plum */
  --erp-text:           #fbfafb;    /* Primary text — near white           */
  --erp-text-medium:    #ebe8f0;    /* Body text — bright lavender         */
  --erp-text-secondary: #d2cce2;    /* Labels / icons — clearly visible    */
  --erp-text-tertiary:  #b8b2cc;    /* Placeholder / nav — easily readable */
  --erp-text-faint:     #908aaa;    /* Faint — clearly discernible         */

  /* Borders — purple-tinted separators */
  --erp-border:         #5e5678;    /* Default borders — visible           */
  --erp-border-strong:  #756d8e;    /* Hover borders — prominent           */
  --erp-border-row:     #4a4362;    /* Row separators — subtle             */

  /* Primary — vibrant purple #594ba0 */
  --erp-primary:        #7c6bc4;    /* Lighter purple for buttons on dark  */
  --erp-primary-fg:     #fbfafb;    /* White text on purple buttons        */
  --erp-primary-hover:  #9080d4;    /* Lighter on hover                    */
  --erp-primary-ring:   rgba(var(--erp-primary-glow-rgb), 0.35);
  --erp-primary-light:  rgba(var(--erp-primary-glow-rgb), 0.2);

  /* Semantic: Success — higher opacity for dark mode readability */
  --erp-success-bg:     rgba(var(--erp-success-rgb), 0.22);
  --erp-success-bg-solid:#10b981;
  --erp-success-bg-dark:#059669;
  --erp-success-border: rgba(var(--erp-success-rgb), 0.35);
  --erp-success-text:   #6ee7b7;
  --erp-success-icon:   #34d399;
  --erp-success-light:  #34d399;

  /* Semantic: Warning */
  --erp-warning-bg:     rgba(var(--erp-warning-rgb), 0.22);
  --erp-warning-bg-solid:#f59e0b;
  --erp-warning-bg-dark:#d97706;
  --erp-warning-border: rgba(var(--erp-warning-rgb), 0.35);
  --erp-warning-text:   #fcd34d;
  --erp-warning-icon:   #fbbf24;

  /* Semantic: Danger */
  --erp-danger-bg:      rgba(var(--erp-danger-rgb), 0.22);
  --erp-danger-bg-solid:#ef4444;
  --erp-danger-bg-dark: #dc2626;
  --erp-danger-border:  rgba(var(--erp-danger-rgb), 0.35);
  --erp-danger-text:    #fca5a5;
  --erp-danger-icon:    #f87171;
  --erp-danger-light:   #f87171;
  --erp-danger-strong:  #fca5a5;

  /* Semantic: Info — purple-tinted */
  --erp-info-bg:        rgba(var(--erp-primary-glow-rgb), 0.2);
  --erp-info-bg-mid:    rgba(var(--erp-primary-glow-rgb), 0.25);
  --erp-info-bg-solid:  #7c6bc4;
  --erp-info-bg-dark:   #594ba0;
  --erp-info-border:    rgba(var(--erp-primary-glow-rgb), 0.35);
  --erp-info-text:      #c4b8e8;
  --erp-info-icon:      #7c6bc4;
  --erp-info-light:     #9080d4;

  /* Semantic: Accent — purple palette */
  --erp-accent-bg:      rgba(var(--erp-primary-glow-rgb), 0.08);
  --erp-accent-bg-mid:  rgba(var(--erp-primary-glow-rgb), 0.12);
  --erp-accent-border:  rgba(var(--erp-primary-glow-rgb), 0.2);
  --erp-accent-text:    #c4b8e8;
  --erp-accent-icon:    #7c6bc4;
  --erp-accent-light:   #9080d4;

  /* Scrollbar */
  --erp-scrollbar:      #5e5678;
  --erp-scrollbar-hover:#756d8e;

  /* Shadows — deeper for dark bg */
  --erp-shadow-sm:      0 1px 2px 0 rgba(var(--erp-black-rgb), 0.25);
  --erp-shadow-lg:      0 4px 12px 0 rgba(var(--erp-black-rgb), 0.3);
  --erp-shadow-xl:      0 8px 24px 0 rgba(var(--erp-black-rgb), 0.35);

  /* Overlay */
  --erp-overlay:        rgba(var(--erp-shadow-tint-rgb), 0.8);

  /* Gradient */
  --erp-gradient-from:  #3b3450;

  /* Button gradient */
  --erp-primary-gradient: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.12) 100%);

  /* Chart palette — brighter for dark backgrounds */
  --erp-chart-1: #7091E6;
  --erp-chart-2: #93b4f8;
  --erp-chart-3: #34d399;
  --erp-chart-4: #fbbf24;
  --erp-chart-5: #f87171;
  --erp-chart-6: #a78bfa;
  --erp-chart-7: #22d3ee;
  --erp-chart-8: #ADBBDA;
  --erp-chart-1-light: #3D52A0;
  --erp-chart-2-light: #7091E6;
  --erp-chart-3-light: #10b981;
  --erp-chart-4-light: #f59e0b;
  --erp-chart-5-light: #ef4444;
  --erp-chart-6-light: #8b5cf6;
  --erp-chart-7-light: #06b6d4;
  --erp-chart-8-light: #8697C4;
  --erp-chart-label: #ADBBDA;
  --erp-chart-grid: rgba(173, 187, 218, 0.08);
  --erp-chart-border: #2d2640;

  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — Tailwind class overrides
   ═══════════════════════════════════════════════════════════════════ */
html.dark body { background-color: var(--erp-bg-page); color: var(--erp-text); }

/* Backgrounds */
html.dark .bg-white     { background-color: var(--erp-bg) !important; }
html.dark .bg-zinc-50   { background-color: var(--erp-bg-page) !important; }
html.dark .bg-zinc-100  { background-color: var(--erp-bg-muted) !important; }
html.dark .bg-zinc-200  { background-color: var(--erp-bg-accent) !important; }
html.dark .bg-zinc-900  { background-color: var(--erp-primary) !important; }
html.dark .bg-transparent { background-color: transparent !important; }

/* Text */
html.dark .text-zinc-900 { color: var(--erp-text) !important; }
html.dark .text-zinc-800 { color: var(--erp-text) !important; }
html.dark .text-zinc-700 { color: var(--erp-text-medium) !important; }
html.dark .text-zinc-600 { color: var(--erp-text-secondary) !important; }
html.dark .text-zinc-500 { color: var(--erp-text-secondary) !important; }
html.dark .text-zinc-400 { color: var(--erp-text-tertiary) !important; }
html.dark .text-zinc-300 { color: var(--erp-text-faint) !important; }
html.dark .text-white    { color: #ffffff !important; }

/* Borders */
html.dark .border-zinc-100    { border-color: var(--erp-border-row) !important; }
html.dark .border-zinc-200    { border-color: var(--erp-border) !important; }
html.dark .border-zinc-300    { border-color: var(--erp-border-strong) !important; }
html.dark .border-zinc-700    { border-color: var(--erp-border-strong) !important; }
html.dark .border-zinc-900    { border-color: var(--erp-primary) !important; }
html.dark .border-white       { border-color: var(--erp-bg) !important; }
html.dark .border-transparent { border-color: transparent !important; }
html.dark .border-dashed      { border-color: var(--erp-border-strong) !important; }

/* Dividers */
html.dark .divide-zinc-100 > * + * { border-color: var(--erp-border-row) !important; }
html.dark .divide-zinc-200 > * + * { border-color: var(--erp-border) !important; }

/* Hover */
html.dark .hover\:bg-zinc-50:hover  { background-color: var(--erp-bg-muted) !important; }
html.dark .hover\:bg-zinc-100:hover { background-color: var(--erp-bg-accent) !important; }
html.dark .hover\:bg-zinc-200:hover { background-color: var(--erp-bg-accent) !important; }
html.dark .hover\:bg-zinc-800:hover { background-color: var(--erp-primary-hover) !important; }
html.dark .hover\:text-zinc-600:hover { color: var(--erp-text-secondary) !important; }
html.dark .hover\:text-zinc-700:hover { color: var(--erp-text-medium) !important; }
html.dark .hover\:text-zinc-900:hover { color: var(--erp-text) !important; }
html.dark .hover\:border-zinc-300:hover { border-color: var(--erp-border-strong) !important; }
html.dark .hover\:border-zinc-400:hover { border-color: var(--erp-border-strong) !important; }

/* Focus / ring */
html.dark .ring-zinc-200              { --tw-ring-color: var(--erp-border) !important; }
html.dark .ring-zinc-900              { --tw-ring-color: var(--erp-primary) !important; }
html.dark .focus\:ring-zinc-900:focus { --tw-ring-color: var(--erp-primary) !important; }

/* Shadows */
html.dark .shadow-sm  { box-shadow: var(--erp-shadow-sm) !important; }
html.dark .shadow-lg  { box-shadow: var(--erp-shadow-lg) !important; }
html.dark .shadow-xl  { box-shadow: var(--erp-shadow-xl) !important; }

/* Semantic colors — Success */
html.dark .bg-emerald-50  { background-color: var(--erp-success-bg) !important; }
html.dark .bg-emerald-100 { background-color: var(--erp-success-bg) !important; }
html.dark .bg-emerald-200 { background-color: rgba(var(--erp-success-rgb), 0.2) !important; }
html.dark .bg-emerald-500 { background-color: var(--erp-success-bg-solid) !important; }
html.dark .bg-emerald-600 { background-color: var(--erp-success-bg-dark) !important; }
html.dark .bg-emerald-700 { background-color: var(--erp-success-bg-dark) !important; }
html.dark .text-emerald-400 { color: var(--erp-success-light) !important; }
html.dark .text-emerald-500 { color: var(--erp-success-icon) !important; }
html.dark .text-emerald-600 { color: var(--erp-success-icon) !important; }
html.dark .text-emerald-700 { color: var(--erp-success-text) !important; }
html.dark .text-emerald-800 { color: var(--erp-success-text) !important; }
html.dark .text-emerald-900 { color: var(--erp-success-text) !important; }
html.dark .border-emerald-200 { border-color: var(--erp-success-border) !important; }
html.dark .border-emerald-400 { border-color: var(--erp-success-icon) !important; }
html.dark .hover\:bg-emerald-700:hover { background-color: var(--erp-success-bg-dark) !important; }

/* Warning */
html.dark .bg-amber-50  { background-color: var(--erp-warning-bg) !important; }
html.dark .bg-amber-100 { background-color: var(--erp-warning-bg) !important; }
html.dark .bg-amber-500 { background-color: var(--erp-warning-bg-solid) !important; }
html.dark .bg-amber-600 { background-color: var(--erp-warning-bg-dark) !important; }
html.dark .text-amber-500 { color: var(--erp-warning-icon) !important; }
html.dark .text-amber-600 { color: var(--erp-warning-text) !important; }
html.dark .text-amber-700 { color: var(--erp-warning-text) !important; }
html.dark .text-amber-800 { color: var(--erp-warning-text) !important; }
html.dark .text-amber-900 { color: var(--erp-warning-text) !important; }
html.dark .border-amber-200 { border-color: var(--erp-warning-border) !important; }

/* Danger */
html.dark .bg-red-50   { background-color: var(--erp-danger-bg) !important; }
html.dark .bg-red-100  { background-color: var(--erp-danger-bg) !important; }
html.dark .bg-red-500  { background-color: var(--erp-danger-bg-solid) !important; }
html.dark .bg-red-600  { background-color: var(--erp-danger-bg-dark) !important; }
html.dark .text-red-400 { color: var(--erp-danger-light) !important; }
html.dark .text-red-500 { color: var(--erp-danger-icon) !important; }
html.dark .text-red-600 { color: var(--erp-danger-icon) !important; }
html.dark .text-red-700 { color: var(--erp-danger-text) !important; }
html.dark .text-red-800 { color: var(--erp-danger-text) !important; }
html.dark .text-red-900 { color: var(--erp-danger-strong) !important; }
html.dark .border-red-200  { border-color: var(--erp-danger-border) !important; }
html.dark .hover\:bg-red-50:hover  { background-color: var(--erp-danger-bg) !important; }
html.dark .hover\:bg-red-600:hover { background-color: var(--erp-danger-bg-dark) !important; }
html.dark .hover\:text-red-500:hover { color: var(--erp-danger-icon) !important; }
html.dark .hover\:text-red-600:hover { color: var(--erp-danger-icon) !important; }

/* Info / Blue */
html.dark .bg-blue-50   { background-color: var(--erp-info-bg) !important; }
html.dark .bg-blue-100  { background-color: var(--erp-info-bg-mid) !important; }
html.dark .bg-blue-500  { background-color: var(--erp-info-bg-solid) !important; }
html.dark .bg-blue-600  { background-color: var(--erp-info-bg-dark) !important; }
html.dark .text-blue-500 { color: var(--erp-info-icon) !important; }
html.dark .text-blue-600 { color: var(--erp-info-icon) !important; }
html.dark .text-blue-700 { color: var(--erp-info-text) !important; }
html.dark .text-blue-800 { color: var(--erp-info-text) !important; }
html.dark .border-blue-200 { border-color: var(--erp-info-border) !important; }

/* Purple / Accent */
html.dark .bg-purple-50  { background-color: var(--erp-accent-bg) !important; }
html.dark .bg-purple-100 { background-color: var(--erp-accent-bg-mid) !important; }
html.dark .text-purple-500 { color: var(--erp-accent-icon) !important; }
html.dark .text-purple-600 { color: var(--erp-accent-icon) !important; }
html.dark .text-purple-700 { color: var(--erp-accent-text) !important; }
html.dark .border-purple-200 { border-color: var(--erp-accent-border) !important; }

/* Form inputs */
html.dark input, html.dark select, html.dark textarea {
  background-color: var(--erp-bg) !important; color: var(--erp-text) !important; border-color: var(--erp-border) !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--erp-text-tertiary) !important; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: var(--erp-primary) !important;
  box-shadow: 0 0 0 2px var(--erp-primary-ring), inset 0 1px 2px rgba(var(--erp-black-rgb), 0.1) !important;
}
html.dark input[type="checkbox"], html.dark input[type="radio"] { background-color: var(--erp-bg-muted) !important; border-color: var(--erp-border-strong) !important; }
html.dark input[type="checkbox"]:checked, html.dark input[type="radio"]:checked { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
html.dark input[type="range"] { background-color: var(--erp-bg-accent) !important; accent-color: var(--erp-primary) !important; }

/* Gradients */
html.dark .bg-gradient-to-r { --tw-gradient-from: var(--erp-gradient-from) !important; --tw-gradient-via: var(--erp-gradient-from) !important; }
html.dark .bg-gradient-to-l { --tw-gradient-from: var(--erp-gradient-from) !important; --tw-gradient-via: var(--erp-gradient-from) !important; }
html.dark .from-white       { --tw-gradient-from: var(--erp-bg) !important; }
html.dark .from-zinc-900    { --tw-gradient-from: var(--erp-primary) !important; }

/* Overlays & Modals */
html.dark .erp-overlay        { background: var(--erp-overlay); }
html.dark .erp-modal-backdrop { background: var(--erp-overlay); }
html.dark .erp-command-palette { background: var(--erp-overlay); }
html.dark .erp-modal-content {
  background-color: var(--erp-bg) !important;
  border-color: var(--erp-border-strong) !important;
  box-shadow: 0 0 0 1px var(--erp-border-strong), 0 16px 48px rgba(var(--erp-black-rgb), 0.4) !important;
}
html.dark .erp-command-palette > div > div {
  background-color: var(--erp-bg) !important;
  border-color: var(--erp-border-strong) !important;
  box-shadow: 0 0 0 1px var(--erp-border-strong), 0 16px 48px rgba(var(--erp-black-rgb), 0.4) !important;
}

/* Skeleton, misc */
html.dark .animate-pulse .bg-zinc-200 { background-color: var(--erp-bg-accent) !important; }
html.dark .animate-pulse .bg-zinc-100 { background-color: var(--erp-bg-muted) !important; }
html.dark .accent-zinc-900 { accent-color: var(--erp-primary) !important; }
html.dark kbd { background-color: var(--erp-bg-muted) !important; border-color: var(--erp-border) !important; color: var(--erp-text-tertiary) !important; }
html.dark code { background-color: var(--erp-bg-muted) !important; color: var(--erp-text-secondary) !important; }
html.dark button.bg-zinc-900[class*="rounded-full"] { background-color: var(--erp-primary) !important; }
html.dark .w-px.bg-zinc-900, html.dark .h-0\.5.bg-zinc-900, html.dark .h-px.bg-zinc-900 { background-color: var(--erp-primary) !important; }
html.dark .wizard-circle { background-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important; }
html.dark .border-b-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
html.dark .border-2.border-zinc-900 { border-color: var(--erp-primary) !important; }


/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Primary color overrides
   bg-zinc-900 → dark navy (#27293b) — already matches!
   But we need focus rings, checkboxes, flatpickr etc. to use vars
   ═══════════════════════════════════════════════════════════════════ */
.bg-zinc-900 { background-color: var(--erp-primary) !important; }
.bg-zinc-800 { background-color: var(--erp-primary-hover) !important; }
.hover\:bg-zinc-800:hover { background-color: var(--erp-primary-hover) !important; }
.border-zinc-900 { border-color: var(--erp-primary) !important; }
.border-b-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
.border-2.border-zinc-900 { border-color: var(--erp-primary) !important; }
.ring-zinc-900 { --tw-ring-color: var(--erp-primary) !important; }
.focus\:ring-zinc-900:focus { --tw-ring-color: var(--erp-primary) !important; }
.accent-zinc-900 { accent-color: var(--erp-primary) !important; }
input[type="checkbox"].text-zinc-900, input[type="radio"].text-zinc-900 { color: var(--erp-primary) !important; accent-color: var(--erp-primary); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--erp-primary) !important; box-shadow: 0 0 0 2px var(--erp-primary-ring), inset 0 1px 2px rgba(var(--erp-black-rgb), 0.04) !important; }
input[type="range"] { accent-color: var(--erp-primary) !important; }
button.bg-zinc-900[class*="rounded-full"] { background-color: var(--erp-primary) !important; }
.wizard-circle { background-color: var(--erp-primary) !important; }
.w-px.bg-zinc-900, .h-0\.5.bg-zinc-900, .h-px.bg-zinc-900 { background-color: var(--erp-primary) !important; }
.from-zinc-900 { --tw-gradient-from: var(--erp-primary) !important; }
.bg-zinc-900.rounded-full { background-color: var(--erp-primary) !important; }

/* Tinted button shadow — blue glow matching #3D52A0 */
.bg-zinc-900[class*="rounded"] {
  box-shadow: 0 1px 3px rgba(var(--erp-primary-deep-rgb), 0.25), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important;
}
.bg-zinc-900[class*="rounded"]:hover {
  box-shadow: 0 4px 14px rgba(var(--erp-primary-deep-rgb), 0.3), inset 0 1px 0 rgba(var(--erp-white-rgb), 0.1) !important;
}
.erp-sidebar a.bg-zinc-900 { box-shadow: 0 1px 6px rgba(var(--erp-primary-glow-rgb), 0.2) !important; }

/* Flatpickr */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; color: var(--erp-primary-fg) !important;
}
.flatpickr-day.today { border-color: var(--erp-primary) !important; }
.flatpickr-day.inRange { background: var(--erp-primary-light) !important; border-color: var(--erp-primary-light) !important; box-shadow: -5px 0 0 var(--erp-primary-light), 5px 0 0 var(--erp-primary-light) !important; }

.otp-box:focus { --tw-ring-color: var(--erp-primary) !important; border-color: var(--erp-primary) !important; }
.border-dashed:hover { border-color: var(--erp-primary) !important; }
.bg-zinc-900.text-white.text-xs.font-medium[class*="rounded-full"] { background-color: var(--erp-primary) !important; }