@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-regular.woff2') format('woff2'); }
@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-500.woff2') format('woff2'); }
@font-face {
    font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/dist/font/poppins-v24-latin-600.woff2') format('woff2'); }

/*
========================================================================================
    VARIABILI GLOBALI - NonSoloFitness
========================================================================================
    Questo file deve essere caricato PRIMA di tutti gli altri CSS.
    Contiene le custom properties (variabili CSS) riutilizzabili in tutto il sito.
========================================================================================
*/

:root {

    /* 
    ========================================================================================
        COLORI BASE
    ========================================================================================
    */


    /* 
    ------------------------------------------------------------------------------------
        BRAND
    ------------------------------------------------------------------------------------
    */
    --nsf-red: #e2001a;
    --nsf-red-light: #ff6b6b;
    --nsf-red-bg: #fff5f6;                   /* Background chiaro rosso (selezioni) */

    /* Verde telefono (header) */
    --nsf-phone-green: #009A44;
    --nsf-phone-green-dark: #006B2F;
    --nsf-phone-green-darker: #00622A;
    --nsf-phone-blue: #2f59c7;               /* Blu telefono (aside contatti) */


    /* 
    ------------------------------------------------------------------------------------
        NEUTRI - CHIARI
    ------------------------------------------------------------------------------------
    */
    
    
    /* Bianchi */
    --nsf-white: #ffffff;
    --nsf-white-warm: #FFFEEF;              /* Testi chiari su sfondo scuro */
    --nsf-warm-bg: #FFF3E6;                 /* Background caldo (pulsanti phone/email) */
    --nsf-off-white: #FAF9F6;
    --nsf-snow-white: #F0F0EC;
    --nsf-white-bright: #F4F5F0;
    --nsf-white-antiflash: #F2F3F4;
    
    /* Scala grigi (50-500 = chiari) */
    --nsf-gray-50: #fafafa;
    --nsf-gray-100: #f8f8f8;
    --nsf-gray-150: #f5f5f5;
    --nsf-gray-200: #f0f0f0;
    --nsf-gray-250: #EAEAEA;
    --nsf-gray-300: #eeeeee;
    --nsf-gray-350: #e0e0e0;
    --nsf-gray-400: #dddddd;
    --nsf-gray-450: #cccccc;
    --nsf-gray-500: #bbbbbb;


    /* 
    ------------------------------------------------------------------------------------
        NEUTRI - SCURI
    ------------------------------------------------------------------------------------
    */
    
    /* Scala grigi (550-800 = scuri) */
    --nsf-gray-550: #afafaf;                /* Placeholder */
    --nsf-gray-600: #999999;
    --nsf-gray-650: #888888;
    --nsf-gray-680: #7F8C8D;                /* Bordi input */
    --nsf-gray-700: #6c757d;                /* Grigio Bootstrap */
    --nsf-gray-750: #666666;
    --nsf-gray-800: #555555;
    --nsf-gray-850: #444444;
    
    /* Neri */
    --nsf-gray-900: #333333;                /* Titoli h3 */
    --nsf-gray-950: #111111;                /* Titoli h4 scuri */
    --nsf-black-soft: #1a1a1a;              /* Testo principale, bottoni */
    --nsf-black: #0a0a0a;                   /* Background sezioni dark */
    --nsf-black-pure: #000000;
    --nsf-header-dark: #0e0e18;             /* Header pagina corso (blu scurissimo) */
    
    /* UI / Accent */
    --nsf-star-yellow: #fbbc04;             /* Stelle rating, Google style */


    /* 
    ------------------------------------------------------------------------------------
        STATI / FEEDBACK
    ------------------------------------------------------------------------------------
    */
    
    /* Danger / Error */
    --nsf-danger: #dc3545;
    --nsf-danger-dark: #c0392b;
    --nsf-danger-light: #e74c3c;
    --nsf-danger-bg: #ffe6e6;
    
    /* Success */
    --nsf-success: #198754;
    --nsf-success-dark: #27ae60;
    --nsf-success-light: #2ecc71;
    --nsf-success-alt: #28a745;             /* Focus input, validazione */
    
    /* Warning */
    --nsf-warning: #e0a800;
    --nsf-warning-dark: #d38a12;
    --nsf-warning-border: #d39e00;
    --nsf-warning-light: #f6a623;
    
    /* Highlight (calendario dettaglio) */
    --nsf-highlight-yellow: #ffd800;
    --nsf-highlight-yellow-bg: #fff7cc;
    
    /* Info */
    --nsf-info: #007BFF;
    --nsf-info-dark: #125da7;
    --nsf-info-light: #1976d2;
    --nsf-info-cyan: #0dcaf0;                /* Bordo evidenziazione (cyan) */
    --nsf-info-bg-light: #f3fcff;            /* Background orari pari */


    /* 
    ------------------------------------------------------------------------------------
        CTA / AZIONI
    ------------------------------------------------------------------------------------
    */
    --nsf-cta-info: #007BFF;                /* Informazioni, link secondari */
    --nsf-cta-intermediate: #6f42c1;        /* Azione preliminare (purple) */
    --nsf-cta-primary: #0d6efd;             /* Azione definitiva */
    --nsf-cta-iscrizione: #e2001a;          /* Iscrizione (= brand red) */
    
    /* UI / Components */
    --nsf-index-bg: #D6EBFF;                /* Background indice articolo */
    --nsf-index-bg-open: #ede7f6;           /* Background indice articolo aperto */
    --nsf-udemy-purple: #a435f0;            /* Pulsante corso online */
    --nsf-form-icon-gray: #5a6e87;          /* Icone form deselezionate */
    --nsf-promo-btn-bg: #b1ee8b;            /* Background pulsante applica codice */
    --nsf-promo-btn-text: #2d3e2c;          /* Testo pulsante applica codice */
    --nsf-focus-blue: #2563eb;              /* Focus outline accessibility */
    
    /* Tabbar */
    --nsf-tabbar-bg: rgba(246, 247, 249, 1);
    --nsf-tabbar-bg-95: rgba(246, 247, 249, 0.95);
    --nsf-tabbar-bg-0: rgba(246, 247, 249, 0);
    --nsf-tabbar-text: rgba(17, 17, 17, 0.72);
    --nsf-tabbar-active-bg: #ededf0;
    --nsf-tabbar-glow: #ffd978;


    /* 
    ------------------------------------------------------------------------------------
        SOCIAL
    ------------------------------------------------------------------------------------
    */
    --nsf-social-whatsapp: #25D366;
    --nsf-social-facebook: #1877F2;
    --nsf-social-instagram: #E1306C;
    --nsf-social-youtube: #FF0000;
    --nsf-social-linkedin: #0a66c2;
    --nsf-social-rss: #f46300;
    --nsf-trustpilot:#00b67a;



    /* 
    ========================================================================================
        COLORI SEMANTICI
    ========================================================================================
        Usa questi per dare significato ai colori nel contesto.
        Riferiscono ai colori base sopra.
    ========================================================================================
    */
    
    
    /* 
    ------------------------------------------------------------------------------------
        TESTO
    ------------------------------------------------------------------------------------
    */
    --nsf-text-primary: var(--nsf-black-soft);
    --nsf-text-secondary: var(--nsf-gray-750);
    --nsf-text-tertiary: var(--nsf-gray-650);
    --nsf-text-muted: var(--nsf-gray-600);
    --nsf-text-placeholder: var(--nsf-gray-550);
    --nsf-text-heading: var(--nsf-gray-900);
    --nsf-text-on-dark: var(--nsf-white);
    --nsf-text-on-dark-soft: var(--nsf-white-warm);
    
    
    /* 
    ------------------------------------------------------------------------------------
        BACKGROUND
    ------------------------------------------------------------------------------------
    */
    --nsf-bg-light: var(--nsf-white);
    --nsf-bg-light-alt: var(--nsf-gray-50);
    --nsf-bg-light-subtle: var(--nsf-gray-100);
    --nsf-bg-dark: var(--nsf-black);
    --nsf-bg-dark-alt: var(--nsf-black-soft);
    
    
    /* 
    ------------------------------------------------------------------------------------
        BORDI
    ------------------------------------------------------------------------------------
    */
    --nsf-border-light: var(--nsf-gray-200);
    --nsf-border-medium: var(--nsf-gray-400);
    --nsf-border-input: var(--nsf-gray-680);
    --nsf-border-footer: var(--nsf-gray-250);
    --nsf-border-on-dark: rgba(255, 255, 255, 0.1);
    
    
    /* 
    ------------------------------------------------------------------------------------
        LINK
    ------------------------------------------------------------------------------------
    */
    --nsf-link: var(--nsf-red);
    --nsf-link-hover-opacity: 0.8;
    
    
    /* 
    ------------------------------------------------------------------------------------
        FORM
    ------------------------------------------------------------------------------------
    */
    --nsf-input-border: var(--nsf-gray-680);
    --nsf-input-focus: var(--nsf-success-alt);
    --nsf-input-error-bg: var(--nsf-danger-bg);
    --nsf-input-error-border: var(--nsf-red);
    --nsf-input-valid-border: var(--nsf-success-alt);
    --nsf-checkbox-accent: var(--nsf-info);



    /* 
    ========================================================================================
        TRASPARENZE RIUTILIZZABILI
    ========================================================================================
    */
    
    
    /* 
    ------------------------------------------------------------------------------------
        BIANCO TRASPARENTE
    ------------------------------------------------------------------------------------
    */
    --nsf-white-03: rgba(255, 255, 255, 0.03);
    --nsf-white-05: rgba(255, 255, 255, 0.05);
    --nsf-white-10: rgba(255, 255, 255, 0.1);
    --nsf-white-15: rgba(255, 255, 255, 0.15);
    --nsf-white-18: rgba(255, 255, 255, 0.18);
    --nsf-white-20: rgba(255, 255, 255, 0.2);
    --nsf-white-25: rgba(255, 255, 255, 0.25);
    --nsf-white-28: rgba(255, 255, 255, 0.28);
    --nsf-white-30: rgba(255, 255, 255, 0.3);
    --nsf-white-35: rgba(255, 255, 255, 0.35);
    --nsf-white-40: rgba(255, 255, 255, 0.4);
    --nsf-white-50: rgba(255, 255, 255, 0.5);
    --nsf-white-60: rgba(255, 255, 255, 0.6);
    --nsf-white-70: rgba(255, 255, 255, 0.7);
    --nsf-white-80: rgba(255, 255, 255, 0.8);
    --nsf-white-85: rgba(255, 255, 255, 0.85);
    
    
    /* 
    ------------------------------------------------------------------------------------
        NERO TRASPARENTE
    ------------------------------------------------------------------------------------
    */
    --nsf-black-05: rgba(0, 0, 0, 0.05);
    --nsf-black-06: rgba(0, 0, 0, 0.06);
    --nsf-black-08: rgba(0, 0, 0, 0.08);
    --nsf-black-10: rgba(0, 0, 0, 0.1);
    --nsf-black-12: rgba(0, 0, 0, 0.12);
    --nsf-black-15: rgba(0, 0, 0, 0.15);
    --nsf-black-20: rgba(0, 0, 0, 0.2);
    --nsf-black-25: rgba(0, 0, 0, 0.25);
    --nsf-black-30: rgba(0, 0, 0, 0.3);
    --nsf-black-40: rgba(0, 0, 0, 0.4);
    --nsf-black-50: rgba(0, 0, 0, 0.5);
    --nsf-black-60: rgba(0, 0, 0, 0.6);
    --nsf-black-70: rgba(0, 0, 0, 0.7);
    --nsf-black-80: rgba(0, 0, 0, 0.8);
    --nsf-black-85: rgba(0, 0, 0, 0.85);
    --nsf-black-90: rgba(0, 0, 0, 0.9);
    --nsf-black-95: rgba(0, 0, 0, 0.95);


    /* 
    ------------------------------------------------------------------------------------
        BRAND TRASPARENTE (per ombre, glow)
    ------------------------------------------------------------------------------------
    */
    --nsf-red-25: rgba(226, 0, 26, 0.25);
    --nsf-red-30: rgba(226, 0, 26, 0.3);
    --nsf-red-35: rgba(226, 0, 26, 0.35);
    --nsf-red-40: rgba(226, 0, 26, 0.4);
    --nsf-red-50: rgba(226, 0, 26, 0.5);
    
    --nsf-info-25: rgba(0, 123, 255, 0.25);
    --nsf-info-35: rgba(0, 123, 255, 0.35);
    --nsf-info-55: rgba(0, 123, 255, 0.55);
    
    /* WhatsApp trasparente (per glow icone) */
    --nsf-whatsapp-25: rgba(37, 211, 102, 0.25);
    --nsf-whatsapp-35: rgba(37, 211, 102, 0.35);
    
    /* Verde Italia (pulsante login) */
        --nsf-italia-green: #008C45;
        --nsf-italia-green-dark: #007A3D;

        /* Arancione (pulsante recupera password) */
        --nsf-orange: #ff4f00;
        --nsf-orange-dark: #e54800;

}