/* ============================================================================
   DESIGN TOKENS — Festa 40 anni Pappasole

   Token visivi del frontend pubblico, derivati per replica fedele dal sito
   principale pappasole.it (V:\pappasole.it\httpnew\_styles\stile-generale.css
   e form.css). Da caricare PRIMA di site.css.

   I valori sono in `rem` con la convenzione `html { font-size: 62.5% }` (definita
   piu' avanti in questo file) che porta 1rem = 10px. Questa convenzione e' quella
   usata dal sito principale e permette di replicare letteralmente i valori del
   sito (es. `1.6rem` = 16px, `3.2rem` = 32px) senza conversioni.
   ============================================================================ */


/* ============================================================================
   SELF-HOSTED WEBFONTS

   Stessi file e stesso `font-display:swap` del sito principale, copiati in
   `Festa40.Pappasole.Web/wwwroot/webfonts/` dalla cartella `webfonts/` del
   sito principale. Self-hosting deciso per privacy (GDPR: niente IP utente
   verso Google Fonts) e performance (no DNS lookup esterno → migliore LCP).
   ============================================================================ */

/* Marcellus — 1 peso unico disponibile (usato per heading, bottoni, link) */
@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/webfonts/marcellus-v14-latin-regular.woff2') format('woff2');
}

/* Merriweather — body, pesi 300/400/600/700/900 + corsivi */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-300.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-300italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-600italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url('/webfonts/merriweather-v33-latin-900italic.woff2') format('woff2');
}


/* ============================================================================
   ROOT — base font size + custom properties

   `html { font-size: 62.5% }` fissa 1rem = 10px (su default browser 16px) e
   permette di scrivere tutti i valori successivi in `rem` come fa il sito
   principale. `body` riporta poi 1.6rem = 16px come default leggibile.
   ============================================================================ */

html {
    font-size: 62.5%;
}

:root {
    /* ---------- Font families ---------- */
    --ff-body: 'Merriweather', 'Helvetica', serif;       /* prosa, default */
    --ff-heading: 'Marcellus', 'Helvetica', serif;       /* titoli, bottoni, link */

    /* ---------- Palette brand (dal sito principale) ---------- */
    --color-primary: #0265AE;            /* Blu acqua — link, titoli, CTA principale */
    --color-primary-hover: #024575;      /* Hover blu pieno */
    --color-primary-dark: #023960;       /* Hover testo pulsante outlined */
    --color-secondary: #CFE5F2;          /* Azzurro chiaro — background soft */
    --color-secondary-bright: #92D4F6;   /* Azzurro brillante — bordo hover outlined */
    --color-accent: #FFD000;             /* Giallo — call to action secondaria */
    --color-beige: #FAF9EA;              /* Beige caldo — background sezioni */
    --color-red: #E94F37;                /* Rosso CTA destructive */

    /* ---------- Neutri ---------- */
    --color-bg: #fffff9;                 /* Bianco caldo del body */
    --color-text: #333;                  /* Testo body */
    --color-text-light: #555;            /* Testo secondario / introduttivo */
    --color-text-muted: #888;            /* Testo terziario / metadati */
    --color-border: #ddd;                /* Border input */
    --color-border-soft: #e6e6e0;        /* Border card / fieldset */
    --color-surface: #fff;               /* Background card / input */
    --color-surface-soft: #f0f0ea;       /* Background hover neutro / thumb */

    /* ---------- Stati ---------- */
    --color-error-text: #d84434;         /* Bordo/testo errore */
    --color-error-bg: #fff3f2;           /* Background errore */
    --color-success-text: var(--color-primary);
    --color-success-bg: var(--color-secondary);
    --color-success-border: var(--color-secondary-bright);

    /* ---------- Spacing (multipli di 0.4rem = 4px) ---------- */
    --space-xxs: 0.2rem;     /* 2px */
    --space-xs: 0.4rem;      /* 4px */
    --space-sm: 0.8rem;      /* 8px */
    --space-md: 1.6rem;      /* 16px */
    --space-lg: 2.4rem;      /* 24px */
    --space-xl: 3.2rem;      /* 32px */
    --space-xxl: 4.4rem;     /* 44px — padding section sito principale */
    --space-xxxl: 6.4rem;    /* 64px */

    /* ---------- Border radius ---------- */
    --radius-sm: 0.6rem;     /* 6px */
    --radius-md: 0.8rem;     /* 8px — input, card piccole */
    --radius-lg: 1.6rem;     /* 16px — card grandi, validation summary */
    --radius-pill: 3.2rem;   /* 32px — pulsanti pill del sito principale */
    --radius-circle: 50%;    /* avatar, icon button */

    /* ---------- Font sizes (rem, base 10px) ---------- */
    --fs-xs: 1.2rem;         /* 12px — metadati */
    --fs-sm: 1.4rem;         /* 14px — secondari */
    --fs-md: 1.6rem;         /* 16px — body default */
    --fs-lg: 1.8rem;         /* 18px — highlight */
    --fs-h3: 2.4rem;         /* 24px */
    --fs-h2: 3.2rem;         /* 32px */
    --fs-h1: 4rem;           /* 40px */

    /* ---------- Line heights ---------- */
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.8;       /* paragrafi del sito principale */

    /* ---------- Shadows ---------- */
    --shadow-card: 0 0 0.8rem rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);

    /* ---------- Transitions ---------- */
    --transition-fast: 0.2s ease;
    --transition-default: 0.35s ease;
    --transition-slow: 0.5s ease;
}


/* ============================================================================
   GLOBAL RESET / DEFAULTS — coerenti col sito principale
   ============================================================================ */

* {
    box-sizing: border-box;
    font-family: var(--ff-body);
}

body {
    font-size: var(--fs-md);
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: var(--lh-normal);
}

/* I bottoni e i link ereditano il font heading (Marcellus) come nel sito principale. */
button, a {
    font-family: var(--ff-heading);
}

a {
    text-decoration: none;
    color: var(--color-primary);
}

a:focus, button:focus {
    outline-offset: 3px;
}

/* Tipografia titoli — Marcellus 400 in primary color, come sito principale. */
h1, h2, h3, h4 {
    font-family: var(--ff-heading);
    font-weight: 400;
    color: var(--color-primary);
}

/* Paragrafi e liste — Merriweather light (300), line-height generoso. */
p, li {
    font-family: var(--ff-body);
    font-weight: 300;
    color: var(--color-text);
    line-height: var(--lh-relaxed);
}

b, strong {
    font-weight: 900;
}