:root {
    /* Colors */
    --v-color-void: #060A0E;
    --v-color-surface1: #0C1219;
    --v-color-surface2: #111922;
    --v-color-surface3: #172029;
    --v-color-blue: #0057FF;
    --v-color-green: #00C896;
    --v-color-purple: #7055FF;
    --v-color-border: #1F3045;
    --v-color-text0: #EDF2F7;
    --v-color-text1: #E2E8F0;
    --v-color-text2: #CBD5E0;
    --v-color-text3: #8A9BB0;
    --v-color-text4: #3D5870;

    /* Spacing - SCALA ORDINATA SEMPLICE */
    --v-space-1: 4px;
    --v-space-2: 8px;
    --v-space-3: 12px;
    --v-space-4: 16px;
    --v-space-5: 24px;
    --v-space-6: 32px;
    --v-space-7: 48px;
    --v-space-8: 64px;
    --v-space-9: 96px;
    --v-space-10: 128px;

    /* Border Radius */
    --v-radius-xs: 4px;
    --v-radius-sm: 8px;
    --v-radius-md: 12px;
    --v-radius-lg: 16px;
    --v-radius-xl: 24px;
    --v-radius-pill: 9999px;

    /* Sizing */
    --v-container-max-width: 1200px;
    --v-grid-columns: 12;
    --v-grid-gutter: 24px;
    --v-base-unit: 8px;

    /* Typography Sizes — Responsive con clamp() */
    /* Homepage hero: rimane grande come prima. Inner pages: ~75% — gerarchia consapevole */
    --v-font-size-hero: clamp(36px, 5vw, 91px);
    --v-font-size-hero-inner: clamp(32px, 3.5vw, 70px);
    --v-font-size-h1: clamp(28px, 4.5vw, 56px);
    --v-font-size-h2: clamp(20px, 3.5vw, 42px);
    --v-font-size-h3: clamp(16px, 2.5vw, 28px);
    --v-font-size-h4: clamp(14px, 2vw, 18px);
    --v-font-size-h5: clamp(12px, 1.5vw, 16px);
    --v-font-size-body: clamp(14px, 1.5vw, 17px);
    --v-font-size-small: clamp(12px, 1.2vw, 15px);
    --v-font-size-kpi: clamp(32px, 6vw, 64px);

    /* Line Heights */
    --v-lh-none: 1;
    --v-lh-tight: 1.1;
    --v-lh-hero: 1.2;
    --v-lh-title: 1.3;
    --v-lh-relaxed: 1.4;
    --v-lh-body: 1.6;

    /* Letter Spacing */
    --v-ls-hero: -0.5px;
    --v-ls-title: -0.3px;
    --v-ls-tight: -0.1px;
    --v-ls-none: 0;
    --v-ls-wide: 1px;
    --v-ls-nav: 1.5px;
    --v-ls-mono: 2px;

    /* Compatibility Mapping with old variables */
    --v-font-size-base: var(--v-font-size-body);
    --primary: var(--v-color-text0);
    --secondary: var(--v-color-void);
    --white: var(--v-color-text0);
    --light-grey: var(--v-color-border);
}

/* Light Mode Color Overrides */
body.light {
    --v-color-void: #EDF2F7;
    --v-color-surface1: #E2E8F0;
    --v-color-surface2: #CBD5E0;
    --v-color-surface3: #8A9BB0;
    --v-color-border: #3D5870;
    --v-color-text0: #060A0E;
    --v-color-text1: #0C1219;
    --v-color-text2: #111922;
    --v-color-text3: #172029;
    --v-color-text4: #1F3045;
}

/* Typography Classes */

.v-typo-headline-hero {
    font-family: "Syne", sans-serif;
    font-size: clamp(26px, 4.5vw, 35px);
    font-weight: 700;
    line-height: var(--v-lh-hero);
    letter-spacing: var(--v-ls-hero);

    color: var(--v-color-text0);
}

.v-typo-title-section {
    font-family: "Syne", sans-serif;
    font-size: clamp(20px, 5vw, 28px);
    font-weight: 700;
    line-height: var(--v-lh-title);
    letter-spacing: var(--v-ls-title);

    color: var(--v-color-text0);
}

.v-typo-kpi-number {
    font-family: "Syne", sans-serif;
    font-size: clamp(32px, 8vw, 48px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    color: var(--v-color-text0);
}

.v-typo-kpi-label {
    font-family: "Syne", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--v-color-text1);
}

.v-typo-card-title {
    font-family: "Syne", sans-serif;
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--v-color-text0);
}

.v-typo-logo-nav {
    font-family: "Syne", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--v-color-text0);
}

.v-typo-subheadline-hero {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--v-lh-body);
    letter-spacing: var(--v-ls-none);

    color: var(--v-color-text2);
}

.v-typo-body {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--v-color-text2);
}

.v-typo-kpi-description {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--v-color-text3);
}

.v-typo-testimonial-text {
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--v-color-text1);
}

.v-typo-testimonial-name {
    font-family: "Syne", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--v-color-text0);
}

.v-typo-nav-menu {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--v-color-text2);
}

.v-typo-label-section {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 2px;
    color: var(--v-color-text4);
}

.v-typo-tag-badge {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--v-color-text4);
}

.v-typo-cta-primary {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--v-color-text0);
}

.v-typo-cta-secondary {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--v-color-text2);
}

.v-typo-testimonial-role {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 1.5px;
    color: var(--v-color-text4);
}

.v-typo-testimonial-retention {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 1.5px;
    color: var(--v-color-green);
}

.v-typo-arrow-cta {
    font-family: "DM Mono", monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 1.5px;
    color: var(--v-color-blue);
}