/* ═══════════════════════════════════════════════════════════════════════════
   Ondes Mail — jetons de design
   ⚠️ MIROIR de saas_website/src/app/[locale]/globals.css : modifier l'un, c'est
   modifier l'autre. `tests/test_webmail_front.py` compare les couleurs des deux.

   Préfixe `--om-` : ce client est aussi rendu DANS l'administration d'un tenant
   (Messagerie › Courriel), qui a ses propres `--bg`, `--text`… Des noms
   communs s'écraseraient mutuellement.

   Le thème suit `html[data-theme]`, l'attribut que posent déjà le site et
   l'administration : dans l'admin, le courriel suit le thème choisi pour
   l'admin, sans second réglage.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.8e433c0592f7.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-latin-500-normal.a09f2fccfee3.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-latin-600-normal.72993dddf88a.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-latin-700-normal.25b0e113ca7c.woff2") format('woff2');
}

/* ── Clair (défaut) — crème chaude + violet ─────────────────────────────── */
.om, .om-page {
  --om-bg:             #eae6dd;
  --om-surface:        #fdfcf8;
  --om-surface-2:      #f2efe8;
  --om-surface-hover:  #f6f3ec;
  --om-border:         #e0dbcf;
  --om-border-strong:  #c3c0b8;
  --om-text:           #1b1b1f;
  --om-text-secondary: #57555e;
  --om-text-muted:     #9a968d;

  --om-accent:         #6a5fd6;
  --om-accent-hover:   #594fb4;
  --om-accent-soft:    rgba(106, 95, 214, 0.10);
  --om-accent-line:    rgba(106, 95, 214, 0.35);

  --om-success:        #2f9e6b;
  --om-warning:        #c2691f;
  --om-danger:         #c44b4b;

  --om-ai-1:           #667eea;
  --om-ai-2:           #764ba2;
  --om-ai-glow:        rgba(102, 126, 234, 0.35);

  --om-dot:            rgba(27, 27, 31, 0.05);
  --om-hairline:       rgba(27, 27, 31, 0.08);
  --om-shadow-card:       0 4px 24px rgba(27, 27, 31, 0.05);
  --om-shadow-card-hover: 0 14px 44px rgba(106, 95, 214, 0.14);
  --om-shadow-pop:        0 24px 80px rgba(27, 27, 31, 0.18);
  --om-overlay:        rgba(27, 27, 31, 0.32);

  --om-radius-card: 20px;
  --om-radius-btn:  14px;
  --om-radius-sm:   10px;
  --om-ease:        cubic-bezier(.16, 1, .3, 1);
  --om-font:         'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --om-font-display: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;

  color-scheme: light;
}

/* ── Sombre — surfaces plates profondes + violet éclairci ────────────────── */
html[data-theme="dark"] .om, html[data-theme="dark"] .om-page,
html[data-theme="dark"].om-page {
  --om-bg:             #1a1b1e;
  --om-surface:        #2b2d31;
  --om-surface-2:      #232428;
  --om-surface-hover:  #35373c;
  --om-border:         #34363b;
  --om-border-strong:  #3f4147;
  --om-text:           #f2f3f5;
  --om-text-secondary: #b5bac1;
  --om-text-muted:     #82858c;

  --om-accent:         #8b81e3;
  --om-accent-hover:   #9d95ea;
  --om-accent-soft:    rgba(139, 129, 227, 0.16);
  --om-accent-line:    rgba(139, 129, 227, 0.40);

  --om-success:        #43b581;
  --om-warning:        #faa61a;
  --om-danger:         #ed6a5e;

  --om-ai-1:           #7d90f0;
  --om-ai-2:           #9b6fc4;
  --om-ai-glow:        rgba(125, 144, 240, 0.40);

  --om-dot:            rgba(255, 255, 255, 0.045);
  --om-hairline:       rgba(255, 255, 255, 0.08);
  --om-shadow-card:       0 2px 0 rgba(0, 0, 0, 0.25), 0 12px 28px rgba(0, 0, 0, 0.45);
  --om-shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.55);
  --om-shadow-pop:        0 24px 80px rgba(0, 0, 0, 0.6);
  --om-overlay:        rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}