/*
 * 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.
 */

:root {
  /* --- palette de marque (teal Clinica, aligne sur le logo) --- */
  --cl-primary-50:  #eefbf7;
  --cl-primary-100: #d3f5ea;
  --cl-primary-200: #a9ebd8;
  --cl-primary-300: #71dbc1;
  --cl-primary-400: #38c3a4;
  --cl-primary-500: #18bc9c;
  --cl-primary-600: #0f9a80;
  --cl-primary-700: #107b68;
  --cl-primary-800: #126254;

  /* Fonds pleins portant du texte blanc.
     Le teal de marque (#18bc9c) ne donne que 2.41 de contraste avec du blanc,
     loin des 4.5 exiges par DESIGN.md §6. Il reste l'accent de la marque, mais
     un bouton plein utilise ces tons-ci : 5.13, 6.44 et 7.93. */
  --cl-primary-fill:        #0e7c66;
  --cl-primary-fill-hover:  #0c6b58;
  --cl-primary-fill-active: #0a5c4c;
  --cl-danger-fill:         #d92d20;
  --cl-danger-fill-hover:   #c8271b;
  --cl-primary-900: #135146;

  --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:  var(--cl-ink-50);
  --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: #12b76a;
  --cl-warning: #f79009;
  --cl-danger:  #f04438;

  /* --- remappage Bootstrap --- */
  --bs-primary: var(--cl-primary-500);
  --bs-primary-rgb: 24, 188, 156;
  --bs-info: var(--cl-info);
  --bs-info-rgb: 46, 144, 250;
  --bs-success: var(--cl-success);
  --bs-success-rgb: 18, 183, 106;
  --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);
  --bs-font-sans-serif: Inter, "Inter var", 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(24 188 156 / .12);
  --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;
}