/* ==========================================================================
   DESIGN TOKENS — Via Victoria
   Fonte unica di verità per colori, tipografia, spaziature, breakpoint.
   ========================================================================== */

:root {
    /* ---------- COLORS ---------- */
    /* Backgrounds */
    --color-bg-default: #ffffff;
    --color-bg-warm: #f9f6f2;           /* bg sezione Scelte Consapevoli */
    --color-bg-warm-dark: #f0ebe4;      /* bg sezione Everyday Essentials */
    --color-bg-hero-from: #f5f0eb;      /* gradient hero (start) */
    --color-bg-hero-to: #ebe4dc;        /* gradient hero (end) */
    --color-bg-dark: #262626;           /* bg banda newsletter (neutral-800) */
    --color-bg-darker: #171717;         /* bg footer (neutral-900) */

    /* Text / Ink */
    --color-ink-900: #171717;
    --color-ink-800: #262626;           /* titoli, testo forte */
    --color-ink-600: #525252;           /* body default (neutral-600) */
    --color-ink-500: #737373;           /* testo secondario (neutral-500) */
    --color-ink-400: #a3a3a3;           /* testo disabilitato/meta */
    --color-ink-300: #d4d4d4;

    --color-on-dark: #ffffff;
    --color-on-dark-muted: #a3a3a3;

    /* Brand */
    --color-brand: #c9a87c;             /* oro/tan: eyebrow, accent, CTA primaria */
    --color-brand-hover: #b8956a;

    /* Linee / bordi */
    --color-line-100: #f5f5f5;
    --color-line-200: #e5e5e5;
    --color-line-700: #404040;          /* bordo icone social footer */
    --color-line-800: #262626;          /* bordo footer top */

    /* Stato focus */
    --color-focus-ring: rgba(201, 168, 124, 0.45);

    /* ---------- TYPOGRAPHY ---------- */
    --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Scala font-size (fluid-ready, ma teniamo valori fissi per replica 1:1) */
    --fs-xs: 0.75rem;        /* 12px */
    --fs-sm: 0.8125rem;      /* 13px */
    --fs-base: 0.875rem;     /* 14px — body navigation/nav/button */
    --fs-md: 1rem;           /* 16px — body paragraphs */
    --fs-lg: 1.125rem;       /* 18px — product card heading */
    --fs-xl: 1.5rem;         /* 24px */
    --fs-2xl: 1.875rem;      /* 30px — newsletter heading */
    --fs-3xl: 2.25rem;       /* 36px — section heading mobile */
    --fs-4xl: 3rem;          /* 48px — section heading desktop */
    --fs-5xl: 3.75rem;       /* 60px — hero md */
    --fs-6xl: 4.5rem;        /* 72px — hero lg */

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    --ls-tight: -0.01em;
    --ls-normal: 0;
    --ls-wide: 0.025em;
    --ls-wider: 0.05em;   /* Tailwind tracking-wider */
    --ls-widest: 0.1em;   /* Tailwind tracking-widest */
    --ls-eyebrow: 0.3em;  /* Eyebrow custom (tracking-[0.3em] nella demo) */

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* ---------- SPACING (8-based, coerente con Tailwind-like) ---------- */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px  */
    --space-2: 0.5rem;       /* 8px  */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px — py sezioni */
    --space-24: 6rem;        /* 96px */
    --space-32: 8rem;        /* 128px */

    /* ---------- LAYOUT ---------- */
    --container-max: 80rem;        /* 1280px (Tailwind max-w-7xl) */
    --container-max-wide: 90rem;   /* 1440px */
    --container-padding: 1.5rem;   /* 24px (Tailwind px-6) */

    /* ---------- RADII / SHADOWS ---------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ---------- TRANSITIONS ---------- */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* ---------- Z-INDEX ---------- */
    --z-sticky: 50;
    --z-overlay: 100;
    --z-modal: 110;
    --z-modal-over: 120;
    --z-toast: 200;
}

/* ---------- BREAKPOINTS ---------- */
/* NB: in CSS le custom properties non funzionano dentro @media (...).
   Valori di riferimento per le media query nei componenti:
     --bp-sm: 480px
     --bp-md: 768px
     --bp-lg: 1024px
     --bp-xl: 1280px
     --bp-2xl: 1440px
   Mobile-first: si parte dal layout mobile, si aggiungono media query min-width.
*/