/* =====================================================
   ZeReviewObserver — Brand Design System
   Palette:
     Primary  : #1B3B5A  (Bleu Abysse Profond)
     Teal     : #4F9DA6  (Eucalyptus)
     Brume    : #BDD4E7  (Bleu Brume)
     Accent   : #E68A5C  (Terre de Sienne Adoucie)
     BG       : #F8F9FA  (Gris Albâtre)
     Text     : #2D3436  (Ardoise Sombre)
   ===================================================== */

:root {
  --zro-primary:       #1B3B5A;
  --zro-primary-dark:  #152d44;
  --zro-primary-light: #22496e;
  --zro-teal:          #4F9DA6;
  --zro-teal-dark:     #3f8a92;
  --zro-teal-light:    #e8f5f6;
  --zro-brume:         #BDD4E7;
  --zro-brume-dark:    #9bbdd6;
  --zro-brume-light:   #eef4f9;
  --zro-accent:        #E68A5C;
  --zro-accent-dark:   #d47040;
  --zro-bg:            #F8F9FA;
  --zro-text:          #2D3436;
}

/* ─── Background blues → primary ──────────────────── */
.bg-blue-900 { background-color: var(--zro-primary) !important; }
.bg-blue-800 { background-color: var(--zro-primary) !important; }
.bg-blue-700 { background-color: var(--zro-primary) !important; }
.bg-blue-600 { background-color: var(--zro-primary-light) !important; }
.bg-blue-500 { background-color: var(--zro-teal) !important; }
.bg-blue-400 { background-color: var(--zro-teal) !important; }
.bg-blue-300 { background-color: var(--zro-brume-dark) !important; }
.bg-blue-200 { background-color: var(--zro-brume) !important; }
.bg-blue-100 { background-color: #d4e5f2 !important; }
.bg-blue-50  { background-color: var(--zro-brume-light) !important; }

/* ─── Hover backgrounds ────────────────────────────── */
.hover\:bg-blue-900:hover { background-color: var(--zro-primary-dark) !important; }
.hover\:bg-blue-800:hover { background-color: var(--zro-primary-dark) !important; }
.hover\:bg-blue-700:hover { background-color: var(--zro-primary) !important; }
.hover\:bg-blue-600:hover { background-color: var(--zro-primary-light) !important; }
.hover\:bg-blue-100:hover { background-color: #d4e5f2 !important; }
.hover\:bg-blue-50:hover  { background-color: var(--zro-brume-light) !important; }

/* ─── Text blues → primary ─────────────────────────── */
.text-blue-900 { color: var(--zro-primary) !important; }
.text-blue-800 { color: var(--zro-primary) !important; }
.text-blue-700 { color: var(--zro-primary) !important; }
.text-blue-600 { color: var(--zro-primary-light) !important; }
.text-blue-500 { color: var(--zro-teal) !important; }
.text-blue-400 { color: var(--zro-teal) !important; }

/* ─── Hover text ───────────────────────────────────── */
.hover\:text-blue-800:hover { color: var(--zro-primary-dark) !important; }
.hover\:text-blue-700:hover { color: var(--zro-primary) !important; }
.hover\:text-blue-600:hover { color: var(--zro-primary-light) !important; }
.hover\:text-blue-500:hover { color: var(--zro-teal) !important; }

/* ─── Borders ──────────────────────────────────────── */
.border-blue-900,
.border-blue-800,
.border-blue-700,
.border-blue-600 { border-color: var(--zro-primary) !important; }
.border-blue-500,
.border-blue-400 { border-color: var(--zro-teal) !important; }
.border-blue-300,
.border-blue-200 { border-color: var(--zro-brume) !important; }
.border-blue-100  { border-color: #d4e5f2 !important; }

/* ─── Hover borders ────────────────────────────────── */
.hover\:border-blue-400:hover { border-color: var(--zro-teal) !important; }
.hover\:border-blue-300:hover { border-color: var(--zro-brume-dark) !important; }

/* ─── Focus rings ──────────────────────────────────── */
.focus\:ring-blue-500:focus,
.focus\:ring-blue-600:focus { --tw-ring-color: var(--zro-primary) !important; }
.focus\:border-blue-500:focus,
.focus\:border-blue-400:focus { border-color: var(--zro-primary) !important; }

/* ─── Dividers ─────────────────────────────────────── */
.divide-blue-100 > * + * { border-color: #d4e5f2 !important; }

/* ─── Ring-offset for focus states ────────────────── */
.focus\:ring-offset-blue-600:focus { --tw-ring-offset-color: var(--zro-primary-light) !important; }

/* ─── Brand utility classes ────────────────────────── */
.zro-bg-primary     { background-color: var(--zro-primary) !important; }
.zro-text-primary   { color: var(--zro-primary) !important; }
.zro-border-primary { border-color: var(--zro-primary) !important; }

.zro-bg-teal        { background-color: var(--zro-teal) !important; }
.zro-bg-teal-light  { background-color: var(--zro-teal-light) !important; }
.zro-text-teal      { color: var(--zro-teal) !important; }
.zro-border-teal    { border-color: var(--zro-teal) !important; }

.zro-bg-brume       { background-color: var(--zro-brume) !important; }
.zro-bg-brume-light { background-color: var(--zro-brume-light) !important; }
.zro-border-brume   { border-color: var(--zro-brume) !important; }
.zro-text-brume     { color: var(--zro-brume) !important; }

.zro-bg-accent      { background-color: var(--zro-accent) !important; }
.zro-text-accent    { color: var(--zro-accent) !important; }
.zro-border-accent  { border-color: var(--zro-accent) !important; }

/* ─── Accent CTA button helper ─────────────────────── */
.zro-btn-accent {
  background-color: var(--zro-accent) !important;
  color: #fff !important;
}
.zro-btn-accent:hover {
  background-color: var(--zro-accent-dark) !important;
}

/* ─── Logo icon on auth pages ──────────────────────── */
.zro-logo-icon {
  background-color: var(--zro-primary) !important;
}