/* theme1.css
 */

:root {

  /* Pagina - Larghezza Massima */
  --page-max-width: 1264px;

  --header-height: 135px;

  /* CODICI COLORE */
  --color-primary-200:#EBF2FA;
  --color-primary-700:#1959A6;
  --color-primary-800:#143F73;

  --color-accent-600:#35A660;

  --color-accent-secondary-500:#41D163;

  --color-neutri-0: #FFFFFF;
  --color-neutri-100: #FAFAFA;
  --color-neutri-200: #F2F2F2;
  --color-neutri-400:#CFCECE;
  --color-neutri-700:#595959;
  --color-neutri-900:#1B1B1B;
  /* FINE CODICI COLORE */


  /* Generale */
  --color-primary: var(--color-primary-800);
  --color-accent: var(--color-accent-600);
  /*Background*/
  --color-primary-bg: #FFFFFF;
  /*Sfondo Staff e Sezione sfondo home*/
  --color-bg-surface-highlight: #FAFAFA;
  /* Da rivedere*/
  --color-secondary-bg: #EBFAF2;



  /* VARIABILI GIULIA */

  /* Text */

  /* Colore testo titoli H1 */
  --color-text-brand: var(--color-primary);

  /* Colore testo link - Parziale */
  --color-text-link: color-mix(
    in srgb,
    var(--color-primary) 90%,
    white
  );

  --color-text-primary:#000000; /* Questo non è nella tabella di Giulia ma nelle variabili che ha usato */
  --color-text-secondary:#595959; /* Questo non è nella tabella di Giulia ma nelle variabili che ha usato */


  /* Layout */

  /* Colore sfondo Header */
  --color-bg-layout-header: var(--color-primary);
  /* Colore sfondo Footer */
  --color-bg-layout-footer: var(--color-primary);
  /* Colore sfondo pagina Login */
  --color-bg-page-brand: var(--color-primary);


  /* Bordi */

  /* To do */
  --color-border-on-brand: color-mix(
    in srgb,
    var(--color-primary) 90%,
    white
  );
  /*To do */
  --color-border-input-hover-active: var(--color-accent);
  /*To do */
  --color-border-tab-active: var(--color-accent);


  /* Surface/Info */

  /* To do */
  --color-bg-progress-fill-loading: color-mix(
    in srgb,
    var(--color-primary) 30%,
    white
  );
  /* Sfondo per i box “Richiedi assistenza” o box di aiuto/info */
  --color-bg-surface-info: color-mix(
    in srgb,
    var(--color-primary) 5%,
    white
  );
  /* Sfondo delle card “Link rapidi” (es.”Contatta DPO”) */
  --color-bg-surface-accent: color-mix(
    in srgb,
    var(--color-accent) 10%,
    white
  );
  /* Hover delle card link rapidi */
  --color-bg-surface-accent-hover: color-mix(
    in srgb,
    var(--color-bg-surface-accent),
    black 5%
  );
  /* Testo delle card “Link rapidi” (es.”Contatta DPO”) */
  --color-text-surface-accent: var(--color-text-primary);


  /* Chip/Badge */

  /* To do */
  --color-bg-chip-selected: color-mix(
    in srgb,
    var(--color-accent-600) 15%,
    white
  );


  /* Button */

  /* Button primary */ 

  /* Sfondo pulsante primario */
  --color-bg-button-primary: var(--color-accent);
  /* Testo pulsante primario */
  --color-text-button-primary: var(--color-neutri-0);
  /* Hover sfondo pulsante primario */
  --color-bg-button-primary-hover: color-mix(
    in srgb,
    var(--color-bg-button-primary) 90%,
    black
  );
  /* To do */
  --color-bg-button-primary-on-brand: var(--color-accent);
  /* To do */
  --color-bg-button-primary-on-brand-hover: color-mix(
    in srgb,
    var(--color-accent) 90%,
    black
  );

  /* Button secondary */ 
  /* Sfondo pulsante secondario su fondo chiaro */
  --color-bg-button-secondary: color-mix(
    in srgb,
    var(--color-primary) 8%,
    white
  );
  /* Colore del testo del pulsante secondario su fondo chiaro */
  --color-text-button-secondary: color-mix(
    in srgb,
    var(--color-primary) 90%,
    white
  );
  /* Hover sfondo pulsante secondario */
  --color-bg-button-secondary-hover: color-mix(
    in srgb,  
    var(--color-bg-button-secondary) 90%,
    black
  );
  /* To do */
  --color-bg-button-secondary-on-brand: var(--color-primary);
  /* To do */
  --color-bg-button-secondary-on-brand-hover: color-mix(
    in srgb,
    var(--color-primary) 90%,
    black
  );
  /* Button Ghost */
  /* Colore del testo del pulsante ghost (senza sfondo) */
  --color-text-button-ghost: color-mix(
    in srgb,
    var(--color-primary) 90%,
    white
  );
  /* Hover sfondo pulsante terziario su fondo chiaro */
  --color-bg-button-ghost-hover: color-mix(
    in srgb,
    var(--color-text-button-ghost),
    white 92%
  );
  /* To do */
  --color-bg-button-ghost-on-brand-hover: color-mix(
    in srgb,
    var(--color-primary) 8%,
    white
  );
    

  /* Tabelle */

  /* To do */
  --color-bg-table-row-hover: color-mix(
    in srgb,
    var(--color-primary) 8%,
    white
  );
  /* To do */
  --color-bg-row-active: color-mix(
    in srgb,
    var(--color-accent-600) 90%,
    black
  );


  /* Icone */

  /*To do */
  --color-icon-accent: var(--color-accent);
  /*To do */
  --color-icon-accent-on-dark: var(--color-accent);
  /* Colore di riempimento per tutti i controlli attivi: checkbox, radio, toggle selezionati */
  --color-control-active: var(--color-accent);
  /*To do */
  --color-control-active-hover: color-mix(
    in srgb,
    var(--color-accent) 90%,
    black
  );

  /* Personalizzazioni */

  /*Testi/Elementi grafici barra di navigazione in alto*/
  --color-text-on-brand:#ffffff;
  /* Testi/Elementi grafici  barra footer */
  --color-text-on-brand-footer:#ffffff;

  /* FINE VARIABILI GIULIA */





  /* ALTRE VARIABILI */
  --page-gutter-x: 24px;
  --tickets-form-max-width: 940px;
  /*Input/Select*/
  --color-border-input-primary: #CFCECE;
  --color-text-input-primary: #0b0f14;
  /* Text */
  --text-primary: #1B1B1B;
  /* Borders */
  --color-border-divider: #DEDEDE;
  --border-default: #E4E4E4;
  /* Feedback */
  --feedback-error: #CF4545;
  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Size Button */
  --button-height: 55px;
  --button-radius: 10px;
  /* Color Input */
  --color-background-input-hover: #ffffff;
  --color-background-input-inactive: #f3f5f7;
  --color-border-input-hover-active: #b9c3cc;
  --color-border-input-focus: #1959A6;
  --color-border-input-error: #d33;
  --color-text-input-placeholder: #8a98a8;
  --color-text-input-label: #595959;
  --color-text-input-helper: #6b7280;
  /* Home Section Background */
  --background-home-section-one-four: var(--color-primary-bg);
  /* Icon svg default */
  --psc-icon-default-color-override: var(--color-accent);
  --psc-icon-default-color: var(--psc-icon-default-color-override);

  /* FINE ALTRE VARIABILI */
}