/* ===== BASE CSS ===== */
/* Un file CSS base completo con variabili per tutti gli elementi fondamentali */

@font-face {
    font-family: 'Gotham-Black';
    src: url('../assets/font/Gotham-Black.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    }

@font-face {
    font-family: 'Gotham-Bold';
    src: url('../assets/font/Gotham-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    }

@font-face {
    font-family: 'Gotham-Book';
    src: url('../assets/font/Gotham\ Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    }

@font-face {
    font-family: 'Gotham-Cond-Bold';
    src: url('../assets/font/GothamCond-Bold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    }

@font-face {
    font-family: 'Gotham-Medium';
    src: url('../assets/font/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    }

:root {
    /* ===== COLORI ===== */
    /* Colori principali */
    --color-primary: #00B4C3;
    --color-primary-dark: #0093a0;

    /* Colori secondari */
    --color-secondary: #212529;

    /* Colori neutri */
    --color-black: #000000;
    --color-white: #ffffff;

    /* Grigi */
    --color-grey: #e0e0e0;

    /* Testo */
    --color-grey: #4b5563;

    /* Colori di background e testo */
    --color-bg: var(--color-white);
    --color-bg-price: var(--color-primary);
    --color-text: var(--color-grey);

    /* ===== TIPOGRAFIA ===== */
    /* Font family */
    --font-family-black: 'Gotham-Black';
    --font-family-bold: 'Gotham-Bold';
    --font-family-book: 'Gotham-Book';
    --font-family-medium: 'Gotham-Medium';
    --font-family-cond: 'Gotham-Cond-Bold';
    
    /* Dimensioni del font base */
    --font-size-h1: 80px;
    --font-size-h2: 60px;
    --font-size-h3: 20px;
    --font-size-subtitle: 24px;
    --font-size-base: 16px;

    /* ===== SPAZIATURA ===== */
    /* Spazi (margini, padding) */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;
    --space-48: 192px;
    --space-56: 224px;
    --space-64: 256px;

    /* ===== DIMENSIONI ===== */
    /* font size */
    --dim-0: 0;
    --dim-1: 4px;
    --dim-2: 8px;
    --dim-3: 12px;
    --dim-4: 16px;
    --dim-5: 20px;
    --dim-6: 24px;
    --dim-8: 32px;
    --dim-10: 40px;
    --dim-12: 48px;
    --dim-16: 64px;
    --dim-20: 80px;
    --dim-24: 96px;
    --dim-32: 128px;
    --dim-40: 160px;
    --dim-48: 192px;
    --dim-56: 224px;
    --dim-64: 256px;

    /* ===== BORDI ===== */
    /* Raggio del bordo */
    --border-radius-none: 0;
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --border-radius-2xl: 16px;
    --border-radius-3xl: 24px;
    --border-radius-5xl: 72px;

    }

    /* ===== RESET ===== */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* ===== ELEMENTI DI BASE ===== */
    h1 {
        font-size: var(--font-size-h1);
        font-family: var(--font-family-bold);
    }
    
    h2 {
        font-size: var(--font-size-h2);
        font-family: var(--font-family-book);
    }

    h2 b, h2 strong {
        font-family: var(--font-family-bold); 
        color: var(--color-secondary);
    }
    
    h3 {
        font-size: var(--font-size-h3);
        font-family: var(--font-family-bold);
    }

    h3 b, h3 strong {
        font-family: var(--font-family-bold);   
        color: var(--color-secondary);
    }
    
    h4 {
        font-size: var(--font-size-subtitle);
        font-family: var(--font-family-cond);
        color: var(--color-primary);
    }

    p {
        font-size: var(--font-size-base);
        font-family: var(--font-family-book);
        color: var(--color-secondary);
    }

    p b, p strong {
        font-family: var(--font-family-bold);   
        color: var(--color-secondary);
    }
    
    a {
        text-decoration: none;
        font-family: var(--font-family-bold);
        color: var(--color-white);
    }

    li {
        list-style-type: none;
        font-family: var(--font-family-bold);
        color: var(--color-white);
    }

    /* ===== UTILITY CLASSES ===== */
    /* Margin */
    .m-0 { margin: var(--space-0); }
    .m-1 { margin: var(--space-1); }
    .m-2 { margin: var(--space-2); }
    .m-3 { margin: var(--space-3); }
    .m-4 { margin: var(--space-4); }
    .m-5 { margin: var(--space-5); }
    .m-6 { margin: var(--space-6); }
    .m-8 { margin: var(--space-8); }
    .m-10 { margin: var(--space-10); }
    .m-12 { margin: var(--space-12); }
    .m-16 { margin: var(--space-16); }
    .m-32 { margin: var(--space-32); }

    .mx-auto {
    margin-left: auto;
    margin-right: auto;
    }

    .mt-0 { margin-top: var(--space-0); }
    .mt-1 { margin-top: var(--space-1); }
    .mt-2 { margin-top: var(--space-2); }
    .mt-3 { margin-top: var(--space-3); }
    .mt-4 { margin-top: var(--space-4); }
    .mt-5 { margin-top: var(--space-5); }
    .mt-6 { margin-top: var(--space-6); }
    .mt-8 { margin-top: var(--space-8); }
    .mt-10 { margin-top: var(--space-10); }
    .mt-12 { margin-top: var(--space-12); }
    .mt-16 { margin-top: var(--space-16); }
    .mt-32 { margin-top: var(--space-32); }

    .mr-0 { margin-right: var(--space-0); }
    .mr-1 { margin-right: var(--space-1); }
    .mr-2 { margin-right: var(--space-2); }
    .mr-3 { margin-right: var(--space-3); }
    .mr-4 { margin-right: var(--space-4); }
    .mr-5 { margin-right: var(--space-5); }
    .mr-6 { margin-right: var(--space-6); }
    .mr-8 { margin-right: var(--space-8); }
    .mr-10 { margin-right: var(--space-10); }
    .mr-12 { margin-right: var(--space-12); }
    .mr-16 { margin-right: var(--space-16); }
    .mr-32 { margin-right: var(--space-32); }

    .mb-0 { margin-bottom: var(--space-0); }
    .mb-1 { margin-bottom: var(--space-1); }
    .mb-2 { margin-bottom: var(--space-2); }
    .mb-3 { margin-bottom: var(--space-3); }
    .mb-4 { margin-bottom: var(--space-4); }
    .mb-5 { margin-bottom: var(--space-5); }
    .mb-6 { margin-bottom: var(--space-6); }
    .mb-8 { margin-bottom: var(--space-8); }
    .mb-10 { margin-bottom: var(--space-10); }
    .mb-12 { margin-bottom: var(--space-12); }
    .mb-16 { margin-bottom: var(--space-16); }
    .mb-32 { margin-bottom: var(--space-32); }

    .ml-0 { margin-left: var(--space-0); }
    .ml-1 { margin-left: var(--space-1); }
    .ml-2 { margin-left: var(--space-2); }
    .ml-3 { margin-left: var(--space-3); }
    .ml-4 { margin-left: var(--space-4); }
    .ml-5 { margin-left: var(--space-5); }
    .ml-6 { margin-left: var(--space-6); }
    .ml-8 { margin-left: var(--space-8); }
    .ml-10 { margin-left: var(--space-10); }
    .ml-12 { margin-left: var(--space-12); }
    .ml-16 { margin-left: var(--space-16); }
    .ml-32 { margin-left: var(--space-32); }

    /* Padding */
    .p-0 { padding: var(--space-0); }
    .p-1 { padding: var(--space-1); }
    .p-2 { padding: var(--space-2); }
    .p-3 { padding: var(--space-3); }
    .p-4 { padding: var(--space-4); }
    .p-5 { padding: var(--space-5); }
    .p-6 { padding: var(--space-6); }
    .p-8 { padding: var(--space-8); }
    .p-10 { padding: var(--space-10); }
    .p-12 { padding: var(--space-12); }
    .p-16 { padding: var(--space-16); }
    .p-32 { padding: var(--space-32); }

    .pt-0 { padding-top: var(--space-0); }
    .pt-1 { padding-top: var(--space-1); }
    .pt-2 { padding-top: var(--space-2); }
    .pt-3 { padding-top: var(--space-3); }
    .pt-4 { padding-top: var(--space-4); }
    .pt-5 { padding-top: var(--space-5); }
    .pt-6 { padding-top: var(--space-6); }
    .pt-8 { padding-top: var(--space-8); }
    .pt-10 { padding-top: var(--space-10); }
    .pt-12 { padding-top: var(--space-12); }
    .pt-16 { padding-top: var(--space-16); }
    .pt-32 { padding-top: var(--space-32); }

    .pr-0 { padding-right: var(--space-0); }
    .pr-1 { padding-right: var(--space-1); }
    .pr-2 { padding-right: var(--space-2); }
    .pr-3 { padding-right: var(--space-3); }
    .pr-4 { padding-right: var(--space-4); }
    .pr-5 { padding-right: var(--space-5); }
    .pr-6 { padding-right: var(--space-6); }
    .pr-8 { padding-right: var(--space-8); }
    .pr-10 { padding-right: var(--space-10); }
    .pr-12 { padding-right: var(--space-12); }
    .pr-16 { padding-right: var(--space-16); }
    .pr-32 { padding-right: var(--space-32); }

    .pb-0 { padding-bottom: var(--space-0); }
    .pb-1 { padding-bottom: var(--space-1); }
    .pb-2 { padding-bottom: var(--space-2); }
    .pb-3 { padding-bottom: var(--space-3); }
    .pb-4 { padding-bottom: var(--space-4); }
    .pb-5 { padding-bottom: var(--space-5); }
    .pb-6 { padding-bottom: var(--space-6); }
    .pb-8 { padding-bottom: var(--space-8); }
    .pb-10 { padding-bottom: var(--space-10); }
    .pb-12 { padding-bottom: var(--space-12); }
    .pb-16 { padding-bottom: var(--space-16); }
    .pb-32 { padding-bottom: var(--space-32); }

    .pl-0 { padding-left: var(--space-0); }
    .pl-1 { padding-left: var(--space-1); }
    .pl-2 { padding-left: var(--space-2); }
    .pl-3 { padding-left: var(--space-3); }
    .pl-4 { padding-left: var(--space-4); }
    .pl-5 { padding-left: var(--space-5); }
    .pl-6 { padding-left: var(--space-6); }
    .pl-8 { padding-left: var(--space-8); }
    .pl-10 { padding-left: var(--space-10); }
    .pl-12 { padding-left: var(--space-12); }
    .pl-16 { padding-left: var(--space-16); }
    .pl-32 { padding-left: var(--space-32); }

    .px-0 { padding: var(--space-0) var(--space-0); }
    .px-1 { padding: var(--space-0) var(--space-1); }
    .px-2 { padding: var(--space-0) var(--space-2); }
    .px-3 { padding: var(--space-0) var(--space-3); }
    .px-4 { padding: var(--space-0) var(--space-4); }
    .px-5 { padding: var(--space-0) var(--space-5); }
    .px-6 { padding: var(--space-0) var(--space-6); }
    .px-8 { padding: var(--space-0) var(--space-8); }
    .px-10 { padding: var(--space-0) var(--space-10); }
    .px-12 { padding: var(--space-0) var(--space-12); }
    .px-16 { padding: var(--space-0) var(--space-16); }
    .px-32 { padding: var(--space-0) var(--space-32); }
    .px-64 { padding: var(--space-0) var(--space-64); }

    .py-0 { padding: var(--space-0) var(--space-0); }
    .py-1 { padding: var(--space-1) var(--space-0); }
    .py-2 { padding: var(--space-2) var(--space-0); }
    .py-3 { padding: var(--space-3) var(--space-0); }
    .py-4 { padding: var(--space-4) var(--space-0); }
    .py-5 { padding: var(--space-5) var(--space-0); }
    .py-6 { padding: var(--space-6) var(--space-0); }
    .py-8 { padding: var(--space-8) var(--space-0); }
    .py-10 { padding: var(--space-10) var(--space-0); }
    .py-12 { padding: var(--space-12) var(--space-0); }
    .py-16 { padding: var(--space-16) var(--space-0); }
    .py-32 { padding: var(--space-32) var(--space-0); }
    .py-64 { padding: var(--space-64) var(--space-0); }

    /* Display */
    .block { display: block; }
    .inline-block { display: inline-block; }
    .inline { display: inline; }
    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .grid { display: grid; }
    .hidden { display: none; }

    /* Flexbox */
    .flex-row { flex-direction: row; }
    .flex-row-reverse { flex-direction: row-reverse; }
    .flex-col { flex-direction: column; }
    .flex-col-reverse { flex-direction: column-reverse; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-nowrap { flex-wrap: nowrap; }
    .justify-start { justify-content: flex-start; }
    .justify-end { justify-content: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-around { justify-content: space-around; }
    .items-start { align-items: flex-start; }
    .items-end { align-items: flex-end; }
    .items-center { align-items: center; }
    .items-baseline { align-items: baseline; }
    .items-stretch { align-items: stretch; }

    /* Width/Height */
    .w-full { width: 100%; }
    .w-half { width: 50%; }
    .w-full-vh { width: 100vw; }
    .w-auto { width: auto; }
    .h-full { height: 100%; }
    .h-full-vh { height: 100vh; }
    .h-auto { height: auto; }

    /* Transform */
    .text-transform-uppercase {text-transform: uppercase;}

    /* Font Family */
    .f-family-black {font-family: var(--font-family-black);}
    .f-family-bold {font-family: var(--font-family-bold);}
    .f-family-book {font-family: var(--font-family-book);}

    /* Position */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .sticky { position: sticky; }
    .static { position: static; }

    /* Text alignment */
    .text-left { text-align: left; }
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-justify { text-align: justify; }

    /* Border */
    .border-red { border: 1px red solid; }

    /* Flex */
    .flex-1 {flex: 1;}
    .flex-2 {flex: 2;}

    /* Gap */
    .gap-0 {gap: var(--space-0);}
    .gap-1 { gap: var(--space-0); }
    .gap-2 { gap: var(--space-1); }
    .gap-3 { gap: var(--space-2); }
    .gap-4 { gap: var(--space-3); }
    .gap-5 { gap: var(--space-4); }
    .gap-6 { gap: var(--space-5); }
    .gap-8 { gap: var(--space-6); }
    .gap-10 { gap: var(--space-8); }
    .gap-12 { gap: var(--space-10); }
    .gap-16 { gap: var(--space-12); }
    .gap-32 { gap: var(--space-16); }

    /* Opacity */
    .opacity-0 { opacity: 0; }
    .opacity-25 { opacity: 0.25; }
    .opacity-50 { opacity: 0.5; }
    .opacity-75 { opacity: 0.75; }
    .opacity-100 { opacity: 1; }

    /* Index */
    .index-0 {z-index: 0;}
    .index-1 {z-index: 1;}
    .index-10 {z-index: 10;}
    .index-100 {z-index: 100;}
    .index-1000 {z-index: 1000;}

    /* Color */
    .white {color: var(--color-white);}
    .black {color: var(--color-black);}
    .primary {color: var(--color-primary);}

    /* Font size */
    .fs-0 {font-size: var(--dim-0);}
    .fs-16 {font-size: var(--dim-4);}
    .fs-20 {font-size: var(--dim-5);}
    .fs-40 {font-size: var(--dim-10);}
    .fs-64 {font-size: var(--dim-16);}
    .fs-80 {font-size: var(--dim-20);}

    /* ===== COMPONENTI DI BASE ===== */
    /* Buttons */
    .btn {
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        background-color: var(--color-primary);
        border-radius: var(--border-radius-5xl);
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-base);
        cursor: pointer;
    }

    .btn:hover { background-color: var(--color-primary-dark); }

    .wireframe {background-color: var(--color-grey);}

.uppercase {text-transform: uppercase;}