/*
 * Clinica — jetons de design
 * Surcharge les variables CSS de Bootstrap 5.3 pour definir l'identite visuelle.
 * Bootstrap 5.3 expose nativement --bs-* et gere le mode sombre via
 * [data-bs-theme="dark"] : on se branche dessus plutot que de dupliquer des regles.
 */

/* Polices de marque AiBani : Poppins (titres) + Nunito (corps). */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* --- palette de marque (bleu AiBani #0D64A6, aligne sur le logo) --- */
  --cl-primary-50:  #e9f3fa;
  --cl-primary-100: #c9e1f3;
  --cl-primary-200: #96c4e6;
  --cl-primary-300: #5ea3d6;
  --cl-primary-400: #2f85c6;
  --cl-primary-500: #1470b4;
  --cl-primary-600: #0d64a6;
  --cl-primary-700: #0b5288;
  --cl-primary-800: #0a4270;

  /* Vert de marque AiBani (accent secondaire). */
  --cl-brand-green: #4c8727;
  --cl-sage:        #a1b09e;

  /* Fonds pleins portant du texte blanc.
     Le bleu de marque #0D64A6 offre 6.18 de contraste avec du blanc (> 4.5
     exiges par DESIGN.md §6) : il sert directement de fond de bouton plein. */
  --cl-primary-fill:        #0d64a6;
  --cl-primary-fill-hover:  #0b5288;
  --cl-primary-fill-active: #093a63;
  --cl-danger-fill:         #d92d20;
  --cl-danger-fill-hover:   #c8271b;
  --cl-primary-900: #08355a;

  --cl-ink-900: #0f172a;
  --cl-ink-800: #1e293b;
  --cl-ink-700: #334155;
  --cl-ink-600: #475569;
  --cl-ink-500: #64748b;
  --cl-ink-400: #94a3b8;
  --cl-ink-300: #cbd5e1;
  --cl-ink-200: #e2e8f0;
  --cl-ink-100: #f1f5f9;
  --cl-ink-50:  #f8fafc;

  /* --- geometrie --- */
  --cl-radius-sm: .375rem;
  --cl-radius:    .625rem;
  --cl-radius-lg: .875rem;
  --cl-radius-xl: 1.25rem;

  /* --- elevation --- */
  --cl-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / .05);
  --cl-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / .08), 0 1px 2px -1px rgb(15 23 42 / .06);
  --cl-shadow-md: 0 4px 12px -2px rgb(15 23 42 / .10), 0 2px 6px -2px rgb(15 23 42 / .06);
  --cl-shadow-lg: 0 12px 28px -8px rgb(15 23 42 / .16), 0 4px 10px -4px rgb(15 23 42 / .08);

  /* --- coque --- */
  --cl-sidebar-width: 268px;
  --cl-sidebar-width-collapsed: 76px;
  --cl-header-height: 64px;
  --cl-control-height: 38px;   /* R8 : hauteur unique des controles de saisie */
  --cl-transition: 180ms cubic-bezier(.4, 0, .2, 1);

  /* --- surfaces (mode clair) --- */
  --cl-canvas:  #f2f3f2;
  --cl-surface: #ffffff;
  --cl-surface-muted: var(--cl-ink-100);
  --cl-border: var(--cl-ink-200);
  --cl-border-strong: var(--cl-ink-300);
  --cl-text: var(--cl-ink-900);
  --cl-text-muted: var(--cl-ink-500);

  --cl-sidebar-bg: #ffffff;
  --cl-sidebar-text: var(--cl-ink-600);
  --cl-sidebar-text-active: var(--cl-primary-700);
  --cl-sidebar-active-bg: var(--cl-primary-50);
  --cl-sidebar-hover-bg: var(--cl-ink-100);

  /* --- couleurs semantiques (regle 1.1) ---
     Bootstrap 5 a redefini info en cyan vif (#0dcaf0) et success en vert sature :
     on impose la palette du produit pour toutes les classes .btn-*, .bg-*,
     .text-* et .badge-*. */
  --cl-info:    #2e90fa;
  --cl-success: #4c8727;
  --cl-warning: #f79009;
  --cl-danger:  #f04438;

  /* --- remappage Bootstrap --- */
  --bs-primary: var(--cl-primary-600);
  --bs-primary-rgb: 13, 100, 166;
  --bs-info: var(--cl-info);
  --bs-info-rgb: 46, 144, 250;
  --bs-success: var(--cl-success);
  --bs-success-rgb: 76, 135, 39;
  --bs-warning: var(--cl-warning);
  --bs-warning-rgb: 247, 144, 9;
  --bs-danger: var(--cl-danger);
  --bs-danger-rgb: 240, 68, 56;
  --bs-secondary: var(--cl-ink-500);
  --bs-secondary-rgb: 100, 116, 139;
  --bs-body-bg: var(--cl-canvas);
  --bs-body-color: var(--cl-text);
  --bs-secondary-color: var(--cl-text-muted);
  --bs-border-color: var(--cl-border);
  --bs-border-radius: var(--cl-radius);
  --bs-border-radius-sm: var(--cl-radius-sm);
  --bs-border-radius-lg: var(--cl-radius-lg);
  --bs-link-color: var(--cl-primary-700);
  --bs-link-hover-color: var(--cl-primary-800);
  --cl-font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
}

/* --- mode sombre : Bootstrap bascule [data-bs-theme="dark"] --- */
[data-bs-theme="dark"] {
  --cl-canvas:  #0b1220;
  --cl-surface: #111a2b;
  --cl-surface-muted: #16223a;
  --cl-border: #1f2f4a;
  --cl-border-strong: #2b3f61;
  --cl-text: #e8eef7;
  --cl-text-muted: #93a4bd;

  --cl-sidebar-bg: #0e1729;
  --cl-sidebar-text: #a7b6cd;
  --cl-sidebar-text-active: var(--cl-primary-300);
  --cl-sidebar-active-bg: rgb(13 100 166 / .16);
  --cl-sidebar-hover-bg: rgb(255 255 255 / .04);

  --cl-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .4);
  --cl-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .45), 0 1px 2px -1px rgb(0 0 0 / .4);
  --cl-shadow-md: 0 4px 12px -2px rgb(0 0 0 / .5), 0 2px 6px -2px rgb(0 0 0 / .4);
  --cl-shadow-lg: 0 12px 28px -8px rgb(0 0 0 / .6), 0 4px 10px -4px rgb(0 0 0 / .45);

  --bs-body-bg: var(--cl-canvas);
  --bs-body-color: var(--cl-text);
  --bs-border-color: var(--cl-border);
  --bs-link-color: var(--cl-primary-300);
  --bs-link-hover-color: var(--cl-primary-200);
  --bs-emphasis-color: #ffffff;
}

/* Titres en Poppins (identite AiBani) ; corps en Nunito via --bs-font-sans-serif. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.brand-text, .navbar-brand, .login-logo {
  font-family: var(--cl-font-heading);
}
