/* ══════════════════════════════════════════════════════════════
   JE Vet OS Pro — Unified Color System v3 (Professional)
   Design philosophy: green primary brand, white surface (light only)
══════════════════════════════════════════════════════════════ */

/* Force light mode — prevent browser/OS auto dark mode */
:root { color-scheme: light; }
html { color-scheme: light !important; }

/* Mobile OS dark mode override: always render in light mode regardless of system setting */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  html  { color-scheme: light !important; background-color: #F4FBF7 !important; color: #000000 !important; }
  body  { background-color: #F4FBF7 !important; color: #000000 !important; }
}

/* ── Static brand scale ── */
:root {
  --brand-50:  #e8f7f1;
  --brand-100: #c4eadb;
  --brand-200: #92d9bc;
  --brand-300: #5ac59c;
  --brand-400: #32A370;
  --brand-500: #2a8d61;
  --brand-600: #226f4d;
  --brand-700: #1a5239;
  --brand-800: #113526;
  --brand-900: #081a13;
}

/* ══════════════════════════════════════════════════════════════
   COLOR TOKENS — green primary / white secondary
══════════════════════════════════════════════════════════════ */
:root {
  /* Primary action (brand green) */
  --color-primary:        #32A370;
  --color-primary-hover:  #2a8d61;
  --color-primary-active: #226f4d;
  --color-primary-subtle: #eaf6f1;
  --color-primary-muted:  #b8e8d4;

  /* Secondary — also green (white is treated as the surface, not a secondary brand) */
  --color-secondary:        #226f4d;
  --color-secondary-hover:  #1a5239;

  /* Page & surface — white-forward content area */
  --color-bg:        #F4FBF7;   /* very light green-tinted page */
  --color-surface:   #FFFFFF;
  --color-surface-2: #F8FCF9;
  --color-surface-3: #EAF6F1;

  /* ── SIDEBAR (green primary) ── */
  --color-sidebar-bg:          #1A5438;
  --color-sidebar-border:      #143E2A;
  --color-sidebar-text:        #C7E8D6;
  --color-sidebar-hover-bg:    rgba(255,255,255,0.08);
  --color-sidebar-hover-text:  #FFFFFF;
  --color-sidebar-active-bg:   rgba(255,255,255,0.16);
  --color-sidebar-active-text: #FFFFFF;
  --color-sidebar-active-bar:  #FFFFFF;
  --color-sidebar-section:     #8FD2B0;
  --color-sidebar-meta:        #C7E8D6;
  --color-sidebar-btn-border:  rgba(255,255,255,0.25);
  --color-sidebar-btn-text:    #E6F5EC;

  /* ── TOPBAR (light, clean) ── */
  --color-topbar-bg:     #FFFFFF;
  --color-topbar-border: #D1E7DC;

  /* Text */
  --color-text:         #000000;
  --color-text-soft:    #000000;
  --color-text-muted:   #111111;
  --color-text-subtle:  #1F2937;
  --color-text-inverse: #FFFFFF;

  /* Border */
  --color-border:        #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-subtle: #F0F5FA;

  /* Status — Error */
  --color-error:        #DC3545;
  --color-error-hover:  #C82333;
  --color-error-bg:     #FFF5F5;
  --color-error-border: #FEB2B2;
  --color-error-text:   #9B2335;

  /* Status — Warning */
  --color-warning:        #E9962A;
  --color-warning-hover:  #CF7D13;
  --color-warning-bg:     #FFFBF0;
  --color-warning-border: #F6CC85;
  --color-warning-text:   #744210;

  /* Status — Success */
  --color-success:        #32A370;
  --color-success-hover:  #2A8D61;
  --color-success-bg:     #EAF6F1;
  --color-success-border: #9EDAD5;
  --color-success-text:   #1A5438;

  /* Status — Info */
  --color-info:        #3182CE;
  --color-info-hover:  #2B6CB0;
  --color-info-bg:     #EBF8FF;
  --color-info-border: #90CDF4;
  --color-info-text:   #2C5282;

  /* SOAP colors (fixed, not theme-adaptive) */
  --color-soap-s: #6366f1;
  --color-soap-o: #0ea5e9;
  --color-soap-a: #f59e0b;
  --color-soap-p: #32A370;

  /* Scrollbar */
  --color-scrollbar: #CBD5E1;

  /* Multi-tenant hook */
  --clinic-primary:       var(--color-primary);
  --clinic-primary-hover: var(--color-primary-hover);
  --clinic-secondary:     var(--color-secondary);
}