/* Design tokens
   Palette: inchiostro blu-nero per il testo, porcellana per gli sfondi, celeste (colore storico
   del sito) come tinta di richiamo, petrolio riservato alle azioni. Il petrolio compare solo dove
   si può cliccare: è così che le CTA si staccano dal resto. */
:root {
    --color-ink: #17232B;
    --color-ink-soft: #3A4852;
    --color-muted: #66757F;
    --color-hair: rgba(23, 35, 43, 0.14);
    --color-hair-strong: rgba(23, 35, 43, 0.28);
    --color-porcelain: #F6F8F9;
    --color-glacier: #C5D6DE;
    --color-glacier-tint: #E6EEF2;
    --color-petrol: #0E5A66;
    --color-petrol-deep: #0A4650;
    --color-petrol-tint: #E2EEF0;
    --color-white: #FFFFFF;
    --color-error: #B3261E;
    --color-success: #1F6B3E;
    --color-whatsapp: #1EBE5D;

    /* Alias storici, usati da regole legacy */
    --color-primary: var(--color-ink);
    --color-primary-dark: var(--color-ink);
    --color-secondary: var(--color-glacier);
    --color-bg-light: var(--color-porcelain);
    --color-accent: var(--color-petrol);
    --color-text-main: var(--color-ink-soft);
    --color-text-light: var(--color-muted);
    --color-border: var(--color-hair);

    /* Tipografia: Jost (geometrico) per titoli e azioni, Mulish (umanista) per il testo */
    --font-heading: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
    --font-body: 'Mulish', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.9rem;
    --text-base: 1.0625rem;
    --text-lg: 1.2rem;
    --text-xl: 1.375rem;
    --text-h3: 1.3rem;
    --text-h2: clamp(1.9rem, 1.35rem + 1.9vw, 2.65rem);
    --text-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
    --leading-tight: 1.06;
    --leading-snug: 1.25;
    --leading-body: 1.6;
    --measure: 62ch;
    --measure-narrow: 48ch;

    /* Spaziatura */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --section-pad: clamp(4rem, 3rem + 5vw, 7rem);
    --section-pad-sm: clamp(2.5rem, 2rem + 3vw, 4.5rem);

    /* Layout */
    --container-width: 1200px;
    --container-narrow: 780px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-height: 80px;
    --mobile-bar-height: 64px;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-arch: 240px 240px 22px 22px;

    --shadow-soft: 0 24px 60px -32px rgba(23, 35, 43, 0.35);
    --shadow-panel: 0 1px 2px rgba(23, 35, 43, 0.04), 0 12px 32px -20px rgba(23, 35, 43, 0.25);

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur-fast: 0.18s;
    --dur-base: 0.3s;

    /* Alias legacy */
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    --transition-fast: var(--dur-fast) var(--ease-out);
    --transition-base: var(--dur-base) var(--ease-out);
}

@media (max-width: 900px) {
    :root {
        --header-height: 68px;
    }
}