/*
 * Fichier de surcharge des variables GUI — La French Renov'
 * Les variables définies ici surchargeront celles définies dans les autres fichiers CSS.
 * À importer dans l'autre projet (même marque, même GUI).
 *
 * Palette source : Charte Graphique La French Renov' — Mars 2026
 *
 * Couleur principale  : Gris foncé  #19143E  → rgb(25, 20, 62)
 * Couleur primaire UI : Orange      #E46B4C  → rgb(228, 107, 76)   (boutons, accents, liens)
 * Secondaire 1        : Magenta     #B617A2  → rgb(182, 23, 162)
 * Secondaire 2        : Jaune       #F3AC42  → rgb(243, 172, 66)
 * Secondaire 3        : Turquoise   #2EC4B6  → rgb(46, 196, 182)
 * Neutre 1 (fond/h.)  : Gris foncé  #19143E  → rgb(25, 20, 62)
 * Neutre 2 (fond)     : Gris clair1 #EEEDF8  → rgb(238, 237, 248)
 * Neutre 3 (fond)     : Gris clair2 #F6F5FA  → rgb(246, 245, 250)
 * Neutre 4 (txt/foncé): Blanc       #FFFFFF  → rgb(255, 255, 255)
 * Dégradé             : Linéaire 165° #F3AC42 → #E46B4C → #B617A2 → #4E1787 → #1B1256
 */

:root {
  /* MAIN COLORS */
  --gui-rgb-color-primary: 25, 20, 62;
  --gui-color-primary: rgb(var(--gui-rgb-color-primary));
  --gui-rgb-color-primary-high: 15, 11, 43;
  --gui-color-primary-high: rgb(var(--gui-rgb-color-primary-high));
  --gui-rgb-color-primary-low: 238, 237, 248;
  --gui-color-primary-low: rgb(var(--gui-rgb-color-primary-low));
  --gui-rgb-color-primary-active: 35, 29, 80;
  --gui-color-primary-active: rgb(var(--gui-rgb-color-primary-active));

  --gui-rgb-color-secondary: 228, 107, 76;
  --gui-color-secondary: rgb(var(--gui-rgb-color-secondary));
  --gui-rgb-color-secondary-high: 200, 80, 50;
  --gui-color-secondary-high: rgb(var(--gui-rgb-color-secondary-high));
  --gui-rgb-color-secondary-low: 251, 228, 220;
  --gui-color-secondary-low: rgb(var(--gui-rgb-color-secondary-low));
  --gui-rgb-color-secondary-active: 243, 125, 95;
  --gui-color-secondary-active: rgb(var(--gui-rgb-color-secondary-active));

  --gui-rgb-color-tertiary: 25, 20, 62;
  --gui-color-tertiary: rgb(var(--gui-rgb-color-tertiary));
  --gui-rgb-color-tertiary-high: 15, 11, 43;
  --gui-color-tertiary-high: rgb(var(--gui-rgb-color-tertiary-high));
  --gui-rgb-color-tertiary-low: 238, 237, 248;
  --gui-color-tertiary-low: rgb(var(--gui-rgb-color-tertiary-low));
  --gui-rgb-color-tertiary-active: 35, 29, 80;
  --gui-color-tertiary-active: rgb(var(--gui-rgb-color-tertiary-active));

  /* STATE COLORS */
  --gui-rgb-color-success: 110, 226, 157;
  --gui-color-success: rgb(var(--gui-rgb-color-success));
  --gui-rgb-color-success-high: 49, 192, 116;
  --gui-color-success-high: rgb(var(--gui-rgb-color-success-high));
  --gui-rgb-color-success-low: 214, 248, 228;
  --gui-color-success-low: rgb(var(--gui-rgb-color-success-low));
  --gui-rgb-color-success-active: 110, 226, 157;
  --gui-color-success-active: rgb(var(--gui-rgb-color-success-active));

  --gui-rgb-color-info: 46, 196, 182;
  --gui-color-info: rgb(var(--gui-rgb-color-info));
  --gui-rgb-color-info-high: 25, 155, 143;
  --gui-color-info-high: rgb(var(--gui-rgb-color-info-high));
  --gui-rgb-color-info-low: 210, 245, 243;
  --gui-color-info-low: rgb(var(--gui-rgb-color-info-low));
  --gui-rgb-color-info-active: 46, 196, 182;
  --gui-color-info-active: rgb(var(--gui-rgb-color-info-active));

  --gui-rgb-color-warning: 243, 172, 66;
  --gui-color-warning: rgb(var(--gui-rgb-color-warning));
  --gui-rgb-color-warning-high: 210, 135, 20;
  --gui-color-warning-high: rgb(var(--gui-rgb-color-warning-high));
  --gui-rgb-color-warning-low: 253, 237, 200;
  --gui-color-warning-low: rgb(var(--gui-rgb-color-warning-low));
  --gui-rgb-color-warning-active: 243, 172, 66;
  --gui-color-warning-active: rgb(var(--gui-rgb-color-warning-active));

  --gui-rgb-color-danger: 226, 35, 91;
  --gui-color-danger: rgb(var(--gui-rgb-color-danger));
  --gui-rgb-color-danger-high: 163, 18, 61;
  --gui-color-danger-high: rgb(var(--gui-rgb-color-danger-high));
  --gui-rgb-color-danger-low: 255, 215, 226;
  --gui-color-danger-low: rgb(var(--gui-rgb-color-danger-low));
  --gui-rgb-color-danger-active: 226, 35, 91;
  --gui-color-danger-active: rgb(var(--gui-rgb-color-danger-active));

  /* GRAY / BLACK / WHITE */
  --gui-rgb-color-white: 255, 255, 255;
  --gui-color-white: rgb(var(--gui-rgb-color-white));
  --gui-rgb-color-black: 25, 20, 62;
  --gui-color-black: rgb(var(--gui-rgb-color-black));

  /* NEUTRALS */
  --gui-rgb-color-neutral-7: 120, 116, 150;
  --gui-color-neutral-7: rgb(var(--gui-rgb-color-neutral-7));
  --gui-rgb-color-neutral-9: 168, 165, 192;
  --gui-color-neutral-9: rgb(var(--gui-rgb-color-neutral-9));
  --gui-rgb-color-neutral-10: 198, 197, 215;
  --gui-color-neutral-10: rgb(var(--gui-rgb-color-neutral-10));
  --gui-rgb-color-neutral-11: 221, 220, 232;
  --gui-color-neutral-11: rgb(var(--gui-rgb-color-neutral-11));

  /* COMPATIBILITY ALIASES (vecteurs animés app-component) */
  --gui-color-primary-darken: var(--gui-color-primary-high);
  --gui-color-primary-lighten: var(--gui-color-primary-low);
  --gui-color-secondary-lighten: var(--gui-color-secondary-low);

  /* BACKGROUND COLORS */
  --gui-rgb-color-background-default: 255, 255, 255;
  --gui-color-background-default: rgb(var(--gui-rgb-color-background-default));
  --gui-rgb-color-background-default-low: 246, 245, 250;
  --gui-color-background-default-low: rgb(var(--gui-rgb-color-background-default-low));
  --gui-rgb-color-background-default-high: 238, 237, 248;
  --gui-color-background-default-high: rgb(var(--gui-rgb-color-background-default-high));
  --gui-rgb-color-background-default-active: 246, 245, 250;
  --gui-color-background-default-active: rgb(var(--gui-rgb-color-background-default-active));

  /* COMPLEMENTARY COLORS — charte LFR Mars 2026 */
  --gui-rgb-color-complementary-1: 253, 237, 200;
  --gui-rgb-color-complementary-2: 243, 172, 66;
  --gui-rgb-color-complementary-3: 245, 200, 240;
  --gui-rgb-color-complementary-4: 182, 23, 162;
  --gui-rgb-color-complementary-5: 210, 245, 243;
  --gui-rgb-color-complementary-6: 46, 196, 182;
  --gui-rgb-color-complementary-7: 251, 228, 220;
  --gui-rgb-color-complementary-8: 228, 107, 76;
  --gui-rgb-color-complementary-9: 210, 200, 235;
  --gui-rgb-color-complementary-10: 78, 23, 135;

  /* GRADIENT (usage décoratif — connexion, bannières) */
  --gui-gradient-brand: linear-gradient(
    165deg,
    #F3AC42 0%,
    #E46B4C 25%,
    #B617A2 55%,
    #4E1787 80%,
    #1B1256 100%
  );
  --gui-color-gradient-1: var(--gui-gradient-brand);

  /* SHADOWS */
  --gui-rgba-color-shadow-small: 25, 20, 62, 0.06;
  --gui-rgba-color-shadow-medium: 25, 20, 62, 0.1;
  --gui-rgba-color-shadow-large: 25, 20, 62, 0.16;

  /* BORDER RADIUS */
  --gui-border-radius-extra-small: 4px;
  --gui-border-radius-small: 8px;
  --gui-border-radius-medium: 16px;
  --gui-border-radius-large: 24px;

  /* TYPOGRAPHY */
  --gui-text-font-size-extra-small: 11px;

  --gui-font-family-default: "Montserrat", "Segoe UI", sans-serif;
  --gui-font-family-heading: "Montserrat", "Segoe UI", sans-serif;
  --gui-heading-font-weight: var(--gui-text-font-weight-bold);
  --gui-heading-font-weight-mobile: var(--gui-text-font-weight-bold);

  --gui-text-font-weight: var(--gui-text-font-weight-regular);

  --gui-h1-font-size: 46px;
  --gui-h1-font-size-mobile: 32px;
  --gui-h2-font-size: 34px;
  --gui-h2-font-size-mobile: 26px;
  --gui-h3-font-size: 26px;
  --gui-h3-font-size-mobile: 21px;
  --gui-h4-font-size: 21px;
  --gui-h4-font-size-mobile: 18px;
  --gui-h5-font-size: 16px;
  --gui-h5-font-size-mobile: 14px;
  --gui-h6-font-size: 14px;
  --gui-h6-font-size-mobile: 12px;

  --gui-header-height: 64px;
  --gui-header-mobile-height: 46px;

  /* TEXT COLORS */
  --gui-text-color: var(--gui-color-black);
  --gui-text-color-low: var(--gui-color-neutral-7);
  --gui-heading-color: var(--gui-color-black);
  --gui-placeholder-color: var(--gui-color-neutral-7);
  --gui-label-color: var(--gui-color-black);

  --gui-label-font-size: var(--gui-text-font-size-medium);
  --gui-label-font-weight: var(--gui-text-font-weight-semi-bold);
  --gui-label-font-family: var(--gui-font-family-default);

  /* LINKS */
  --gui-link-color: var(--gui-color-secondary);
  --gui-link-hover-color: var(--gui-color-secondary-active);
  --gui-link-text-decoration: none;
  --gui-link-font-size: var(--gui-text-font-size-medium);

  /* LINE HEIGHT */
  --gui-text-line-height-extra-small: 16px;
  --gui-text-line-height-small: 18px;
  --gui-text-line-height-medium: 22px;
  --gui-text-line-height-large: 24px;
  --gui-text-line-height-extra-large: 28px;

  --gui-h1-line-height: 56px;
  --gui-h1-line-height-mobile: 40px;
  --gui-h2-line-height: 42px;
  --gui-h2-line-height-mobile: 32px;
  --gui-h3-line-height: 32px;
  --gui-h3-line-height-mobile: 26px;
  --gui-h4-line-height: 26px;
  --gui-h4-line-height-mobile: 22px;
  --gui-h5-line-height: 20px;
  --gui-h5-line-height-mobile: 18px;
  --gui-h6-line-height: 18px;
  --gui-h6-line-height-mobile: 16px;

  --gui-modal-backdrop-color: rgba(var(--gui-rgb-color-primary), 0.8);
}

body {
  font-family: var(--gui-font-family-default);
  background: var(--gui-gradient-brand);
}

wc-button[color=secondary] {
  --wc-button-color: var(--gui-text-color);
}