:root {

 --primary-black: rgb(0, 0, 0);
 --primary-red: rgb(216, 32, 52);
 --primary-white: rgb(255, 255, 255);
 --primary-grey: rgb(128, 128, 128);
 --primary-grey-light: rgb(218, 218, 218);
 --primary-bg: rgb(244, 244, 244);

 --secondary-blossom: rgb(253, 129, 130);
 --secondary-bordeaux: rgb(161, 28, 54);
 --secondary-sunflower: rgb(252, 197, 45);
 --secondary-terracotta: rgb(196, 84, 23);
 --secondary-lime: rgb(204, 212, 87);
 --secondary-sky: rgba(131, 206, 197, 0.7);
 --secondary-forest: rgb(96, 126, 70);
 --secondary-sea: rgb(21, 132, 123);



  --ben-sys-font-family: 'Calibri';
  --ben-sys-font-family-title: 'LegacySerifStd';
  --ben-sys-font-family-action: 'LegacySansStd';

  --ges-sys-font-family: 'Nunito';
  --ges-sys-font-family-action: 'Nunito';
  --ges-sys-font-family-title: 'Nunito';


  --ben-sys-primary: #d82034;
  --ges-sys-primary: #d82034;
  --ben-sys-on-primary: #fff;
  --ben-sys-primary-container: var(--primary-red);
  --ben-sys-on-primary-container: var(--primary-white);
  --ben-sys-on-tertiary: #d82034;


  --ben-sys-title-large-size: 40px;
  --ben-sys-title-large-line-height:36px;

  --ben-sys-background: var(--primary-bg, red);
  --ges-sys-background: #f2f4f7;

  --ben-sys-surface-container-low: var(--primary-white, white);

  --ben-sys-secondary-container: var(--primary-grey-light);

  --ben-sys-on-background: #1a1b1f;
  --ben-sys-surface: var(--primary-white);
  --ben-sys-on-surface: #353535;
  --ben-sys-on-surface-variant: var(--primary-grey);

  --ben-dark-sys-primary: #e81b22;
  --ben-dark-sys-background: #18171d;

--ben-sys-title-large-weight:500;
  --ges-sys-corner-full:9999px;
  --ben-sys-corner-full:0px;
  --ben-sys-corner-medium:0;
  
  /* Variables pour les pop-ups spécifiquement */
  --ben-sys-dialog-border-radius: 0px;
  --ges-sys-dialog-border-radius: 0px;
}

/* Variables Material UI pour bordures carrées - s'appliquent UNIQUEMENT à l'interface bénéficiaire */
/* Scopées dans le contexte bénéficiaire pour ne pas affecter l'interface gestionnaire */
.ben {
  /* Corner system variables */
  --mat-sys-corner-extra-large: 0px;
  /* Dialogs */
  --mdc-dialog-container-shape: 0px;
  --mat-dialog-container-shape: 0px;
  /* Buttons */
  --mdc-filled-button-container-shape: 0px;
  --mdc-outlined-button-container-shape: 0px;
  --mdc-text-button-container-shape: 0px;
  --mdc-protected-button-container-shape: 0px;
  /* Cards */
  --mdc-elevated-card-container-shape: 0px;
  --mdc-filled-card-container-shape: 0px;
  --mdc-outlined-card-container-shape: 0px;
  /* Chips */
  --mdc-chip-container-shape: 0px;
  /* Text fields */
  --mdc-text-field-container-shape: 0px;
  /* Menus */
  --mat-menu-container-shape: 0px;
  /* Snackbars */
  --mat-snack-bar-container-shape: 0px;
  /* Tooltips */
  --mat-tooltip-container-shape: 0px;
}

/* Variables redéfinies sur les overlays CDK pour garantir leur accessibilité */
/* Les overlays CDK sont créés dans le body, donc on redéfinit les variables critiques sur les overlays */
/* UNIQUEMENT pour l'interface bénéficiaire (.ben) */
::ng-deep .cdk-overlay-pane.ben {
  --mat-sys-corner-extra-large: 0px;
  --mdc-dialog-container-shape: 0px;
  --mat-dialog-container-shape: 0px;
  --ben-sys-dialog-border-radius: 0px;
}

/* Style complet pour sl/ : background plein écran avec chemin direct vers l'image */
/* Le .htaccess redirige /assets/skins/sl/ vers /assets/skins/swisslife/ */
.login-pages-swisslife {
  position: relative;
}

.login-pages-swisslife::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%),
    url(/assets/skins/beneficiary/bg_image.jpg) no-repeat center center / cover !important;
  content: ' ';
  height: 100vh !important;
  min-height: 100% !important;
  max-height: none !important;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}