/***
 * F5 - Content Management System
 * 
 * Copyright © 2025
 * Reload - Laboratorio Multimediale
 * (http://www.reloadlab.it - info@reloadlab.it)
 * 
 * authors: Domenico Gigante (domenico.gigante@reloadlab.it) and Alessio Attanasio (alessio.attanasio@reloadlab.it)
 ***/

@charset "utf-8";
/* CSS Document */

/**
 * ==============================================================================
 * NESTA SURVEY SYSTEM - THEME VARIABLES
 * ==============================================================================
 * 
 * File di configurazione centralizzato per temi personalizzati.
 * Modificare SOLO questo file per adattare colori e font ai diversi clienti.
 * 
 * ISTRUZIONI PER LA PERSONALIZZAZIONE:
 * 1. Modifica i valori delle variabili qui sotto
 * 2. Non modificare i nomi delle variabili
 * 3. Usa codici colore esadecimali (#RRGGBB) o rgba()
 * 4. Testa sempre il contrasto per l'accessibilità (WCAG 2.1 AA)
 */

:root {
    /* ==================================================================
     * COLORI BRAND
     * ================================================================== */
    /* Colore principale (blu) */
    --color-primary-lighter: 232,241,248;
    --color-primary-light: 130,179,218;
    --color-primary: 27,117,188;
    --color-primary-dark: 15,64,103;
    --color-primary-darker: 3,12,19;
    
    /* Colore secondario (rosso) */
    --color-secondary-lighter: 253,232,233;
    --color-secondary-light: 244,130,135;
    --color-secondary: 234,28,36;
    --color-secondary-dark: 129,15,20;
    --color-secondary-darker: 23,3,4;
    
    
    /* ==================================================================
     * COLORI PRIMARI
     * ================================================================== */
    /* Nero e Bianco */
    --color-black: 0,0,0;
    --color-white: 255,255,255;
    
    /* Colore principale */
    --color-primary-app-lighter: var(--color-primary-lighter);
    --color-primary-app-light: var(--color-primary-light);
    --color-primary-app: var(--color-primary);
    --color-primary-app-dark: var(--color-primary-dark);
    --color-primary-app-darker: var(--color-primary-darker);
    --color-primary-app-inverse: var(--color-white);
    
    /* Colore secondario */
    --color-secondary-app-lighter: var(--color-secondary-lighter);
    --color-secondary-app-light: var(--color-secondary-light);
    --color-secondary-app: var(--color-secondary);
    --color-secondary-app-dark: var(--color-secondary-dark);
    --color-secondary-app-darker: var(--color-secondary-darker);
    --color-secondary-app-inverse: var(--color-white);

    /* Colori grigi (scala 1) */
    --color-gray-extra-lighter: 251,251,251;
    --color-gray-extra-light: 230,230,230;
    --color-gray-lighter: 209,209,208;
    --color-gray-light: 188,188,187;
    --color-gray: 166,166,165;
    --color-gray-dark: 143,142,142;
    --color-gray-darker: 119,118,118;
    --color-gray-extra-dark: 94,93,93;
    --color-gray-extra-darker: 66,65,65;

    /* Colori grigi (scala 2) */
    --color-gray2-extra-lighter: 240,240,240;
    --color-gray2-extra-light: 220,220,219;
    --color-gray2-lighter: 199,199,198;
    --color-gray2-light: 177,177,176;
    --color-gray2: 155,154,154;
    --color-gray2-dark: 131,130,130;
    --color-gray2-darker: 106,106,105;
    --color-gray2-extra-dark: 80,79,79;
    --color-gray2-extra-darker: 51,51,51;
    

    /* ==================================================================
     * COLORI DI STATO
     * ================================================================== */
    /* Successo */
    --color-success-lighter: 66,178,91;
    --color-success-light: 53,172,80;
    --color-success: 40,167,69;
    --color-success-dark: 38,157,65;
    --color-success-darker: 35,147,61;
    --color-success-text: 0,53,0;
    --color-success-inverse: var(--color-white);
    
    /* Errore */
    --color-error-lighter: 224,64,64;
    --color-error-light: 222,51,51;
    --color-error: 220,38,38;
    --color-error-dark: 207,36,36;
    --color-error-darker: 194,33,33;
    --color-error-text: 74,0,0;
    --color-error-inverse: var(--color-white);
    
    /* Warning */
    --color-warning-lighter: 255,200,37;
    --color-warning-light: 255,197,22;
    --color-warning: 255,193,7;
    --color-warning-dark: 240,181,7;
    --color-warning-darker: 224,170,6;
    --color-warning-text: 104,47,0;
    --color-warning-inverse: var(--color-white);
    
    /* Info */
    --color-info-lighter: 51,173,193;
    --color-info-light: 37,168,188;
    --color-info: 23,162,184;
    --color-info-dark: 22,152,173;
    --color-info-darker: 20,143,162;
    --color-info-text: 0,49,69;
    --color-info-inverse: var(--color-white);
    
    /* Danger */
    --color-danger-lighter: 224,77,91;
    --color-danger-light: 222,65,80;
    --color-danger: 220,53,69;
    --color-danger-dark: 207,50,65;
    --color-danger-darker: 194,47,61;
    --color-danger-text: 7,0,0;
    --color-danger-inverse: var(--color-white);
    

    /* ==================================================================
     * COLORI CONTENUTI - Testi, bordi, sfondi
     * ================================================================== */
    /* testi (grigio) */
    --color-txt-extra-lighter: var(--color-gray-lighter);
    --color-txt-lighter: var(--color-gray2);
    --color-txt-light: var(--color-gray2-darker);
    --color-txt: var(--color-gray2-extra-darker);
    --color-txt-dark: 35,34,33;
    --color-txt-darker: 15,14,14;
    --color-txt-black: var(--color-black);
    --color-txt-inverse: var(--color-white);
    
    /* testi (primary) */
    --color-txt-primary-lighter: var(--color-primary-app-lighter);
    --color-txt-primary-light: var(--color-primary-app-light);
    --color-txt-primary: var(--color-primary-app);
    --color-txt-primary-dark: var(--color-primary-app-dark);
    --color-txt-primary-darker: var(--color-primary-app-darker);
    --color-txt-primary-inverse: var(--color-primary-app-inverse);
    
    /* testi (secondary) */
    --color-txt-secondary-lighter: var(--color-secondary-app-lighter);
    --color-txt-secondary-light: var(--color-secondary-app-light);
    --color-txt-secondary: var(--color-secondary-app);
    --color-txt-secondary-dark: var(--color-secondary-app-dark);
    --color-txt-secondary-darker: var(--color-secondary-app-darker);
    --color-txt-secondary-inverse: var(--color-white);
    
    /* Sfondi (primary) */
    --color-bg-primary-lighter: var(--color-primary-app-lighter);
    --color-bg-primary-light: var(--color-primary-app-light);
    --color-bg-primary: var(--color-primary-app);
    --color-bg-primary-dark: var(--color-primary-app-dark);
    --color-bg-primary-darker: var(--color-primary-app-darker);
    --color-bg-primary-inverse: var(--color-primary-app-inverse);
    
    /* Sfondi (secondary) */
    --color-bg-secondary-lighter: var(--color-secondary-app-lighter);
    --color-bg-secondary-light: var(--color-secondary-app-light);
    --color-bg-secondary: var(--color-secondary-app);
    --color-bg-secondary-dark: var(--color-secondary-app-dark);
    --color-bg-secondary-darker: var(--color-secondary-app-darker);
    --color-bg-secondary-inverse: var(--color-white);
    
    /* Sfondi grigi */
    --color-bg-white: var(--color-white);
    --color-bg-extra-lighter: var(--color-gray-extra-lighter);
    --color-bg-extra-light: var(--color-gray2-extra-lighter);
    --color-bg-lighter: var(--color-gray-extra-light);
    --color-bg-light: var(--color-gray2-extra-light);
    --color-bg: var(--color-gray-lighter);
    --color-bg-dark: var(--color-gray2-lighter);
    --color-bg-darker: var(--color-gray-light);
    --color-bg-extra-dark: var(--color-gray2-light);
    --color-bg-extra-darker: var(--color-gray);
    
    /* Bordi grigi */
    --color-brd-white: var(--color-gray2-extra-light);
    --color-brd-extra-lighter: var(--color-gray-lighter);
    --color-brd-extra-light: var(--color-gray2-lighter);
    --color-brd-lighter: var(--color-gray-light);
    --color-brd-light: var(--color-gray2-light);
    --color-brd: var(--color-gray);
    --color-brd-dark: var(--color-gray2);
    --color-brd-darker: var(--color-gray-dark);
    --color-brd-extra-dark: var(--color-gray2-dark);
    --color-brd-extra-darker: var(--color-gray-darker);
    

    /* ==================================================================
     * COLORI INTERATTIVI - Bottoni, link, elementi cliccabili
     * ================================================================== */
    /* Link */
    --color-link: var(--color-primary-app);
    --color-link-hover: var(--color-primary-app-dark);
    --color-link-visited: var(--color-secondary-app-dark);
    
    /* Bottoni primari */
    --color-btn-primary: var(--color-primary-app);
    --color-btn-primary-txt: var(--color-primary-app-inverse);
    --color-btn-primary-hover: var(--color-primary-app-dark);
    --color-btn-primary-txt-hover: var(--color-primary-app-inverse);
    --color-btn-primary-active: var(--color-primary-app-dark);
    --color-btn-primary-txt-active: var(--color-primary-app-inverse);
    --color-btn-primary-disabled: var(--color-bg-extra-light);
    --color-btn-primary-txt-disabled: var(--color-txt-light);
    --color-btn-primary-focus: var(--color-primary-app);
     
    /* Bottoni primari (outline) */
    --color-btn-primary-outline: var(--color-primary-app-inverse);
    --color-btn-primary-outline-txt: var(--color-primary-app);
    --color-btn-primary-outline-hover: var(--color-primary-app);
    --color-btn-primary-outline-txt-hover: var(--color-primary-app-inverse);
    --color-btn-primary-outline-active: var(--color-primary-app-dark);
    --color-btn-primary-outline-txt-active: var(--color-primary-app-inverse);
    --color-btn-primary-outline-disabled: var(--color-primary-app-inverse);
    --color-btn-primary-outline-txt-disabled: var(--color-brd-light);
    --color-btn-primary-outline-focus: var(--color-primary-app);
    
    /* Bottoni secondari */
    --color-btn-secondary: var(--color-success);
    --color-btn-secondary-txt: var(--color-success-inverse);
    --color-btn-secondary-hover: var(--color-success-dark);
    --color-btn-secondary-txt-hover: var(--color-success-inverse);
    --color-btn-secondary-active: var(--color-success-dark);
    --color-btn-secondary-txt-active: var(--color-success-inverse);
    --color-btn-secondary-disabled: var(--color-bg-extra-light);
    --color-btn-secondary-txt-disabled: var(--color-txt-light);
    --color-btn-secondary-focus: var(--color-success);
    
    /* Bottoni secondari (outline) */
    --color-btn-secondary-outline-bg: var(--color-white);
    --color-btn-secondary-outline-txt: var(--color-primary-app);
    --color-btn-secondary-outline-hover: var(--color-primary-app);
    --color-btn-secondary-outline-border: var(--color-primary-app);
    
    /* Bottoni terziari */
    --color-btn-thirdary: var(--color-danger);
    --color-btn-thirdary-txt: var(--color-danger-inverse);
    --color-btn-thirdary-hover: var(--color-danger-darker);
    --color-btn-thirdary-txt-hover: var(--color-danger-inverse);
    --color-btn-thirdary-active: var(--color-danger-dark);
    --color-btn-thirdary-txt-active: var(--color-danger-inverse);
    --color-btn-thirdary-disabled: var(--color-bg-extra-light);
    --color-btn-thirdary-txt-disabled: var(--color-txt);
    --color-btn-thirdary-focus: var(--color-danger);
    

    /* ==================================================================
     * OMBRE
     * ================================================================== */
    --color-shadow-black: var(--color-black);
    --color-shadow-primary: var(--color-primary-app);
    --color-shadow-secondary: var(--color-secondary-app);
    

    /* ==================================================================
     * COLORI ACCESSIBILITA
     * ================================================================== */
    /* accessibility */
    --color-a11y: var(--color-primary-app);
    --color-a11y-bg-dark: var(--color-primary-app-dark);
    --color-a11y-bg-darker: var(--color-primary-app-darker);
    --color-a11y-txt: var(--color-pale);
    
    /* Colore per focus e highlights (importante per accessibilità ) */
    --color-focus:  var(--color-secondary-app);
    --color-focus-ring: rgba(var(--color-secondary-app-light), 0.3);


    /* ==================================================================
     * COLORI STRUTTURA
     * ================================================================== */
    /* Body */
    --color-body: var(--color-secondary-app-light);
    
    /* header */
    --color-header: var(--color-primary);
    --color-header-inverse: var(--color-white);

    /* footer */
    --color-footer: var(--color-body);
    --color-footer-brd: var(--color-body);
    --color-footer-txt: var(--color-txt);
    
    /* navbar */
    --color-navbar: var(--color-primary);
    --color-navbar-hover: var(--color-secondary);
    
    /* main */
    --color-main: var(--color-secondary-app-light);

    /* step header */
    --color-step-header: var(--color-primary-app);
    
    /* step footer */
    --color-step-footer: var(--color-main);
    --color-step-footer-brd: var(--color-main);
    
    /* questions */
    --color-quest-hd-bg: var(--color-gray-extra-dark);
    --color-quest-hd-txt: var(--color-txt-primary-inverse);
    --color-quest-answered: var(--color-bg-primary);
    --color-quest-answered-txt: var(--color-white);
    --color-quest-answered-footer: var(--color-txt-primary);
    

    /* ==================================================================
     * COLORI MODAL
     * ================================================================== */
    /* Modal familiari */
    --color-modal-bg: var(--color-bg-white);
    --color-modal-brd: var(--color-primary-app);
    --color-modal-hd-bg: var(--color-bg-primary);
    --color-modal-hd-txt: var(--color-txt-inverse);
    --color-modal-cls-bg: var(--color-bg-secondary);
    --color-modal-cls-bg-hover: var(--color-bg-secondary-dark);
    --color-modal-cls-txt: var(--color-txt-primary-inverse);

    /* Intro quest */
    --color-modal-intro-lbl: var(--color-txt-primary);

    /* Progress bar */
    --color-progress-fill: var(--color-bg-primary-light);

    /* Quest */
    --color-modal-quest-header: var(--color-txt-dark);
    

    /* ==================================================================
     * COLORI COMPONENTI
     * ================================================================== */
    /* Option items (radio/checkbox) */
    --color-option-selected: var(--color-bg-primary);
    --color-option-selected-txt: var(--color-txt-primary-inverse);
    --color-option-selected-inverse: var(--color-gray-light);
    --color-option-selected-hover: var(--color-bg-primary-dark);
    
    /* select */
    --color-select-focus: var(--color-bg-secondary);
    
    /* searchable select */
    --color-searchable-input-focus: var(--color-bg-secondary);
    --color-searchable-options-brd: var(--color-bg-primary);
    --color-searchable-option-selected: var(--color-bg-primary);
    --color-searchable-option-selected-txt: var(--color-txt-primary-inverse);
    --color-searchable-option-selected-hover: var(--color-bg-primary-dark);
    --color-searchable-badge: var(--color-bg-primary);
    --color-searchable-badge-txt: var(--color-txt-primary-inverse);
    
    /* Likert scale */
    --color-likert: var(--color-bg-primary);
    --color-likert-step: var(--color-bg-darker);
    --color-likert-step-active: var(--color-bg-primary);
    --color-likert-step-brd: var(--color-bg-secondary);
    --color-likert-selection-txt: var(--color-txt-primary);
    --color-likert-selection-hd: var(--color-txt);
    
    /* Age counter */
    --color-age-active: var(--color-bg-secondary);
    --color-age-hover: var(--color-bg-primary-light);
    
    /* BMI */
    --color-bmi-result: var(--color-txt-primary);
    
    /* Familiari */
    --color-familiari-title: var(--color-txt-primary);
    --color-familiari-ico: var(--color-txt-secondary);
    --color-familiari-lst-tipo: var(--color-txt-primary-light);
    --color-familiari-lst-fragilita: var(--color-txt-secondary);
    
    /* Likert bars */
    --color-likert-bars: var(--color-bg-primary);
    --color-likert-bars-step: var(--color-bg-darker);
    --color-likert-bars-step-active: var(--color-bg-primary);
    --color-likert-bars-step-brd: var(--color-bg-secondary);
    --color-likert-bars-txt: var(--color-bg-primary);
    --color-likert-bars-txt-inverse: var(--color-txt-inverse);

    /* Colore per focus e highlights (importante per accessibilità ) */
    --color-gauge-basso: var(--color-primary-app);
    --color-gauge-medio: 131,73,112;
    --color-gauge-alto: var(--color-secondary-app);
    
    /* Scrollbar */
    --color-scrollbar-thumb: var(--color-primary-app);
    --color-scrollbar-thumb-hover: var(--color-primary-app-dark);
    

    /* ==================================================================
     * COLORI PAGINE PRIVACY, REPORT, ERROR
     * ================================================================== */
    /* privacy */
    --color-hero-h1: var(--color-secondary-light);
    --color-privacy: var(--color-primary-app);
	
    /* report */
    --color-report: var(--color-primary-app);
    --color-report-brd: var(--color-secondary-app-dark);
	
    /* error */
    --color-error-page: var(--color-primary-app);
    --color-error-page-ico: var(--color-secondary-app);
    

    /* ==================================================================
     * TIPOGRAFIA - Font families
     * ================================================================== */
    /* Font principale */
    --font-family-base: "Roboto", sans-serif;
    
    /* Font per titoli (se diverso dal base) */
    --font-family-heading: var(--font-family-base);
    
    /* Font monospace per codice */
    --font-family-mono: "Courier New", Courier, monospace;
    

    /* ==================================================================
     * TIPOGRAFIA - Dimensioni font (scalabili)
     * ================================================================== */
    /* Dimensione base */
    --font-size-base: 16px;
	
	/* Scale tipografica */
    --text-base-xs: clamp(13px, 0.875rem, 14px);
    --text-base-sm: clamp(14px, 0.9375rem, 15px);
    --text-base: clamp(15px, 1rem, 16px);
    --text-base-md: clamp(16px, 1.125rem, 18px);
	--text-base-lg: clamp(16px, 1.25rem, 20px);
	--text-base-xl: clamp(16px, 1.5rem, 24px);
	--text-base-xxl: clamp(16px, 1.875rem, 30px);
	--text-base-xxxl: clamp(16px, 2.25rem, 36px);
    
    /* Font weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line height */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Ico */
	--nav-step-ico: clamp(35px, 3.125rem, 50px);
	--step-circle-ico: clamp(24px, 2.8125rem, 45px);
	--nessun-familiare-ico: clamp(42px, 3.75rem, 60px);
	--error-ico: clamp(56px, 5rem, 80px);
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v51-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v51-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v51-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-v51-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/roboto-v51-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v51-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}