/* ============================================================
   Emmunity — Color tokens   (source of truth: official brand book)
   ------------------------------------------------------------
   Brand colors are THEME-INVARIANT. Backgrounds, text, surfaces and
   status tints swap between light & dark via the [data-theme] scopes
   at the bottom. Components should prefer the THEME-AWARE semantic
   aliases (--surface, --ink, --text, --line, --ok-bg …) so they flip
   automatically; raw scale tokens (--b500, --navy) stay constant.
   ============================================================ */
:root {
  /* ---- Brand (theme-invariant) ---------------------------- */
  --brand:       #2561FA;   /* Active Blue — PRIMARY               */
  --brand-2:     #0149FF;   /* gradient end                        */
  --brand-deep:  #1A48C8;   /* pressed / deep                      */
  --navy:        #001D67;   /* Guardian Navy — headings, footer    */
  --teal:        #13D1C3;   /* accent                              */
  --teal-ink:    #0C8C83;   /* accent text on light                */

  /* ---- Accent scale · blue 50–900 ------------------------- */
  --b50:  #EAF0FF; /* @kind color */
  --b100: #D6E2FF; /* @kind color */
  --b200: #AEC2F5; /* @kind color */
  --b300: #7FA0FF; /* @kind color */
  --b400: #4A82FF; /* @kind color */
  --b500: #2561FA; /* @kind color */
  --b600: #1A48C8; /* @kind color */
  --b700: #143AA0; /* @kind color */
  --b800: #0E2A75; /* @kind color */
  --b900: #08184A; /* @kind color */

  /* ---- Status (theme-invariant hues) ---------------------- */
  --ok:    #1FBE7A;   /* « à jour »          (vert)   */
  --warn:  #F6A609;   /* « expire bientôt »  (jaune)  */
  --over:  #F2455B;   /* « expiré »          (rouge)  */
  --none:  #828BB0;   /* « non administré »  (gris)   */

  /* ---- Gradients ------------------------------------------ */
  --grad-brand:  linear-gradient(150deg, #2561FA, #0149FF); /* @kind color */
  --grad-danger: linear-gradient(150deg, #F2455B, #D6293F); /* @kind color */
  --grad-teal:   linear-gradient(150deg, #13D1C3, #0CB3A6); /* @kind color */
  --grad-splash: radial-gradient(120% 90% at 35% 30%, #2C68FF 0%, #1A56FF 55%, #0A4BFF 100%); /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — back-compat names mapped onto the
     official tokens (older components reference these).
     ============================================================ */
  --color-primary:        var(--brand);
  --color-primary-hover:  var(--brand-2);
  --color-primary-press:  var(--brand-deep);
  --color-on-primary:     #FFFFFF;
  --color-accent:         var(--teal);

  /* blue scale back-compat */
  --blue-50:  var(--b50);
  --blue-100: var(--b100);
  --blue-200: var(--b200);
  --blue-300: var(--b300);
  --blue-400: var(--b400);
  --blue-500: var(--b500);
  --blue-600: var(--brand);
  --blue-700: var(--b600);
  --blue-800: var(--b700);
  --blue-900: var(--b900);

  --navy-900: var(--ink);
  --navy-800: var(--navy);
  --navy-700: var(--ink);
  --ink-600:  var(--text);

  --slate-500: var(--muted);
  --slate-400: var(--muted);
  --slate-300: var(--line);
  --slate-200: var(--line);
  --slate-100: var(--inset);

  --teal-500: var(--teal);
  --teal-600: var(--teal-ink);
  --teal-50:  var(--ok-bg);

  --success-500: var(--ok);
  --success-50:  var(--ok-bg);
  --warning-500: var(--warn);
  --warning-50:  var(--warn-bg);
  --danger-500:  var(--over);
  --danger-50:   var(--over-bg);

  --text-heading:  var(--ink);
  --text-title:    var(--ink);
  --text-body:     var(--text);
  --text-muted:    var(--muted);
  --text-meta:     var(--muted);
  --text-on-brand: #FFFFFF;
  --text-link:     var(--brand);

  --surface-app:   var(--bg);
  --surface-card:  var(--surface);
  --surface-inset: var(--surface-2);
  --surface-brand: var(--brand);
  --surface-tint:  var(--b100);

  --border-subtle: var(--line);
  --border-strong: var(--b200);
  --divider:       var(--line);
}

/* ============================================================
   LIGHT THEME  (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --bg:        #F4F7FE;
  --surface:   #FFFFFF;
  --surface-2: #EAF0FF;
  --inset:     #EFF3FE;

  --ink:    #001D67;
  --text:   #3A4467;
  --muted:  #7A82A6;
  --line:   #E6EAF4;

  --ok-bg:   #E4F7EE;  --ok-ink:   #0E8A53;
  --warn-bg: #FEF1D8;  --warn-ink: #9A6500;
  --over-bg: #FDE8EC;  --over-ink: #C8233A;
  --info-bg: #EAF0FF;
  --none-bg: #EEF1F8;

  --tab-active: #001D67;
}

/* ============================================================
   DARK THEME  — set <html data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
  --bg:        #070B1A;
  --surface:   #111733;
  --surface-2: #1A2240;
  --inset:     #0E1430;

  --ink:    #FFFFFF;
  --text:   #C5CCEC;
  --muted:  #828BB8;
  --line:   #262E4E;

  --ok-bg:   rgba(31,190,122,.15);  --ok-ink:   #46DDA0;
  --warn-bg: rgba(246,166,9,.16);   --warn-ink: #F7B83C;
  --over-bg: rgba(242,69,91,.16);   --over-ink: #FF8092;
  --info-bg: rgba(37,97,250,.18);
  --none-bg: rgba(130,139,176,.16);

  --b50: rgba(37,97,250,.16);
  --tab-active: #FFFFFF;
}