/* ============================================================
   MSponsor — Color tokens
   Source: Guide de marque MSponsor (Design par Alexie)
   ============================================================ */

:root {
  /* ---- Brand core (raw values from the brand guide) ---- */
  --ms-vert-primaire: #02372E;   /* iconic dark green — dominant surface */
  --ms-vert-clair:    #024E41;   /* "vert clair" — slightly lifted green */
  --ms-turquoise:     #7DD2C1;   /* soft turquoise accent */
  --ms-turquoise-mid: #60BFA2;   /* gradient mid-stop */
  --ms-lime:          #B5EC23;   /* bright lime — primary accent / CTA */
  --ms-lime-pale:     #CFEF6E;   /* pale lime — soft accent */
  --ms-gris-vert:     #466E3D;   /* muted moss "gris" — tertiary */
  --ms-gris-clair:    #F1F1F1;   /* light grey surface */
  --ms-noir:          #0A0F0D;   /* near-black */
  --ms-blanc:         #FFFFFF;

  /* ---- Extended green ramp (derived, harmonious) ---- */
  --ms-green-900: #02201A;
  --ms-green-800: #02372E;  /* = vert primaire */
  --ms-green-700: #024E41;  /* = vert clair */
  --ms-green-600: #0A6453;
  --ms-green-500: #2C8A73;
  --ms-green-400: #60BFA2;  /* gradient mid */
  --ms-green-300: #7DD2C1;  /* turquoise */
  --ms-green-200: #ABE2D6;
  --ms-green-100: #D7F1EB;
  --ms-green-50:  #EEF8F5;

  /* ---- Turquoise ramp (the "entreprises" colour) ----
     Brand turquoise #7DD2C1 anchors 300; deeper steps lean bluer
     so it reads distinctly from the project green. ---- */
  --ms-turq-900: #06343A;
  --ms-turq-800: #0B4A50;  /* deep teal-blue surface */
  --ms-turq-700: #11646C;
  --ms-turq-600: #188391;
  --ms-turq-500: #25A0AB;
  --ms-turq-400: #54BFBF;
  --ms-turq-300: #7DD2C1;  /* = brand turquoise */
  --ms-turq-200: #A8E2D8;
  --ms-turq-100: #D5F1EC;
  --ms-turq-50:  #EDF9F7;

  /* ---- Lime ramp ---- */
  --ms-lime-700: #7BA50C;
  --ms-lime-600: #97C814;
  --ms-lime-500: #B5EC23;  /* bright lime */
  --ms-lime-400: #C5F049;
  --ms-lime-300: #CFEF6E;  /* pale lime */
  --ms-lime-200: #E0F59E;
  --ms-lime-100: #F0FBCF;

  /* ---- Neutral / grey ramp ---- */
  --ms-grey-900: #15201C;
  --ms-grey-800: #283330;
  --ms-grey-700: #3E4A46;
  --ms-grey-600: #5C6863;
  --ms-grey-500: #7E8A85;
  --ms-grey-400: #A6B0AC;
  --ms-grey-300: #CBD2CF;
  --ms-grey-200: #E4E8E6;
  --ms-grey-100: #F1F1F1;  /* gris clair */
  --ms-grey-50:  #F8F9F8;

  /* ---- Semantic status ---- */
  --ms-success: #2C8A73;
  --ms-warning: #E8B23A;
  --ms-danger:  #D8563E;
  --ms-info:    #60BFA2;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components & screens
     ============================================================ */

  /* Surfaces */
  --surface-brand:        var(--ms-vert-primaire); /* hero / dark sections */
  --surface-brand-deep:   var(--ms-green-900);
  --surface-brand-lift:   var(--ms-vert-clair);
  --surface-page:         var(--ms-blanc);
  --surface-subtle:       var(--ms-grey-50);
  --surface-muted:        var(--ms-grey-100);
  --surface-card:         var(--ms-blanc);
  --surface-card-dark:    var(--ms-vert-clair);
  --surface-inverse:      var(--ms-vert-primaire);

  /* Text */
  --text-strong:   var(--ms-vert-primaire);
  --text-body:     #1C2622;
  --text-muted:    var(--ms-grey-600);
  --text-subtle:   var(--ms-grey-500);
  --text-on-brand: var(--ms-blanc);
  --text-on-brand-muted: rgba(255,255,255,0.72);
  --text-on-lime:  var(--ms-vert-primaire);
  --text-accent:   var(--ms-green-600);

  /* Accents / interactive */
  --accent-lime:        var(--ms-lime-500);
  --accent-lime-hover:  var(--ms-lime-600);
  --accent-lime-press:  var(--ms-lime-700);
  --accent-turquoise:   var(--ms-turq-500);
  --accent-turquoise-hover: var(--ms-turq-600);
  --accent-green:       var(--ms-vert-clair);

  /* Borders / lines */
  --border-subtle:  var(--ms-grey-200);
  --border-default: var(--ms-grey-300);
  --border-strong:  var(--ms-grey-400);
  --border-on-brand: rgba(255,255,255,0.16);
  --border-lime:    var(--ms-lime-500);

  /* Focus ring */
  --focus-ring: var(--ms-turquoise-mid);

  /* ============================================================
     DUAL-AUDIENCE SYSTEM
     Vert  = côté PROJETS (porteurs de projets)
     Turquoise = côté ENTREPRISES (commanditaires)
     Lime  = accent d'énergie commun (CTA, surbrillance)
     ============================================================ */

  /* Projets (green) */
  --projet-surface:      var(--ms-vert-primaire);
  --projet-surface-soft: var(--ms-green-100);
  --projet-accent:       var(--ms-green-600);
  --projet-on-soft:      var(--ms-green-700);
  --projet-border:       var(--ms-green-400);

  /* Entreprises (turquoise) */
  --entreprise-surface:      var(--ms-turq-800);
  --entreprise-surface-soft: var(--ms-turq-100);
  --entreprise-accent:       var(--ms-turq-600);
  --entreprise-on-soft:      var(--ms-turq-700);
  --entreprise-border:       var(--ms-turq-400);

  /* ---- Gradients ----
     Backgrounds: prefer SOLID fills. Gradient *backgrounds* are reserved for the
     vert-primaire / deep-green family (hero, officiel); turquoise / lime / grey
     backgrounds stay flat. NB: this is for fills only — the gradient-ended ribbon
     curves (assets/motifs/*-degrade/) remain the PREFERRED ligne graphique. ---- */
  --gradient-officiel: linear-gradient(120deg, #02372E 0%, #60BFA2 100%); /* @kind color */
  --gradient-ribbon:   linear-gradient(110deg, #024E41 0%, #60BFA2 38%, #B5EC23 78%, #CFEF6E 100%); /* @kind color */
  --gradient-lime:     linear-gradient(120deg, #B5EC23 0%, #CFEF6E 100%); /* @kind color */
  --gradient-hero:     radial-gradient(120% 120% at 18% 0%, #024E41 0%, #02372E 55%, #02201A 100%); /* @kind color */
  --gradient-turquoise: linear-gradient(120deg, #0B4A50 0%, #25A0AB 58%, #7DD2C1 100%); /* @kind color */
  --gradient-entreprise: radial-gradient(120% 120% at 18% 0%, #11646C 0%, #0B4A50 55%, #06343A 100%); /* @kind color */
}