/* ==========================================================================
   Odin Key — Color tokens
   Palette de marque (maquette Claude Design) : navy #000055 · violet #5005CD ·
   vert #00E182. Les échelles `--red-*` / `--ink-*` / `--marine-*` gardent leur
   NOM historique (les composants les référencent) mais portent désormais les
   valeurs Odin Key : `--red-*` = échelle violette, `--ink-*` = neutres teintés navy.
   Le rouge « vrai » (erreurs) vit uniquement dans --status-danger.
   ========================================================================== */

:root {
  /* ---- Marque : navy / violet / vert ------------------------------------ */
  --navy-900: #000055;   /* header, hero, sections sombres */
  --navy-800: #0A0A3D;   /* barres de réassurance, footer, sous-nav */
  --navy-700: #141460;   /* bas de dégradé hero */
  --purple-500: #5005CD; /* action principale */
  --purple-600: #3F04A3; /* hover / pressed */
  --brand-green: #00E182;     /* accent (sur fond navy ou en fond avec texte navy) */
  --brand-green-600: #00B368; /* accent sur fond clair (icônes) */

  /* ---- Échelle « red » = violet Odin Key (nom historique conservé) -------- */
  --red-50:  #F3EDFF;
  --red-100: #E6DBFF;
  --red-200: #CDB8FF;
  --red-300: #B091FA;
  --red-400: #9568F2;
  --red-500: #5005CD;   /* primaire */
  --red-600: #3F04A3;   /* hover / pressed */
  --red-700: #320383;
  --red-800: #250262;
  --red-900: #190142;

  /* ---- Ink / neutres teintés navy ---------------------------------------- */
  --ink-950: #0B0B1A;   /* quasi-noir — titres */
  --ink-900: #12122B;
  --ink-800: #1C1C38;
  --ink-700: #33334F;   /* texte courant */
  --ink-600: #4A4A66;
  --ink-500: #5C5C77;   /* muted (maquette) — 6,9:1 sur blanc */
  --ink-400: #8A8AA3;   /* placeholder / désactivé */
  --ink-300: #C4C4D6;   /* bordures fortes */
  --ink-200: #E6E6F0;   /* bordure par défaut (maquette --line) */
  --ink-150: #EEEEF6;
  --ink-100: #F1F1F8;   /* fond discret */
  --ink-50:  #F5F5FB;   /* fond de section (maquette --paper-2) */
  --white:   #FFFFFF;

  /* ---- Teintes sémantiques ------------------------------------------------ */
  --green-50:  #E7F7EE;
  --green-500: #12925A;  /* en stock / succès (contraste texte OK sur blanc) */
  --green-600: #0E784A;

  --amber-50:  #FFF6E5;
  --amber-400: #F5A623;  /* étoiles */
  --amber-500: #E8930C;  /* offres limitées */

  --blue-50:   #EAF1FE;
  --blue-500:  #2563EB;

  /* ---- Accents secondaires (icônes de catégories, etc.) ------------------- */
  --petrole-50:  #E3F2F4;
  --petrole-500: #0F6E7C;
  --petrole-600: #155E69;

  --marine-50:   #EAF1F8;
  --marine-400:  #2C2C86;
  --marine-500:  #0A0A3D;

  --swiss-red: #D8232A;  /* conservé pour d'éventuels drapeaux ; plus utilisé dans les gabarits */

  /* ======================================================================
     Alias sémantiques — à référencer dans les composants, pas les échelles.
     ====================================================================== */

  /* Marque & actions */
  --color-primary:        var(--purple-500);
  --color-primary-hover:  var(--purple-600);
  --color-primary-active: var(--red-700);
  --color-primary-tint:   var(--red-50);
  --color-on-primary:     var(--white);

  /* Texte */
  --text-strong:  var(--navy-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-on-dark: var(--white);
  --text-link:    var(--purple-500);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-50);
  --surface-inverse: var(--navy-800);
  --surface-tint:    var(--red-50);

  /* Bordures */
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--purple-500);

  /* Statuts */
  --status-success:      var(--green-500);
  --status-success-tint: var(--green-50);
  --status-warning:      var(--amber-500);
  --status-warning-tint: var(--amber-50);
  --status-danger:       #C62828;   /* vrai rouge : erreurs uniquement */
  --status-danger-tint:  #FDECEC;
  --status-info:         var(--blue-500);
  --status-info-tint:    var(--blue-50);
  --rating-star:         var(--amber-400);

  /* Anneau de focus */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--purple-500) 35%, transparent);

  /* Accent mode sombre (nom historique conservé : désormais le vert de marque) */
  --cyan-500: #00E182;
}

/* ==========================================================================
   Thème sombre — bascule via [data-theme="dark"] sur <html>.
   Surfaces navy profond ; violet pour les actions, vert pour liens/accents.
   On ne réécrit que les alias sémantiques : tous les composants s'adaptent.
   ========================================================================== */
[data-theme="dark"] {
  --text-strong:  #FFFFFF;
  --text-body:    #CDCDE6;
  --text-muted:   #9C9CC4;
  --text-faint:   #6F6FA3;
  --text-on-dark: #FFFFFF;
  --text-link:    var(--brand-green);

  --surface-page:    #06062B;
  --surface-card:    #0D0D48;
  --surface-sunken:  #12125A;
  --surface-inverse: #FFFFFF;
  --surface-tint:    color-mix(in srgb, var(--purple-500) 28%, transparent);

  --border:        #25257A;
  --border-strong: #35359A;
  --border-focus:  var(--brand-green);

  --color-primary:        #6A1FE0;   /* violet éclairci : lisible sur navy */
  --color-primary-hover:  #7C3AED;
  --color-on-primary:     #FFFFFF;

  --status-success-tint: color-mix(in srgb, var(--green-500) 18%, transparent);
  --status-warning-tint: color-mix(in srgb, var(--amber-500) 18%, transparent);
  --status-danger:       #FF6B6B;
  --status-danger-tint:  color-mix(in srgb, #FF6B6B 18%, transparent);
  --status-info-tint:    color-mix(in srgb, var(--blue-500) 18%, transparent);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-green) 40%, transparent);

  color-scheme: dark;
}