/* ═══════════════════════════════════════════════════════════
   Villa Megna — Design System
   CSS Custom Properties + reset + base tipografica
   ═══════════════════════════════════════════════════════════ */

:root {

    /* ── Palette ──────────────────────────────────────────── */
    --vm-gold:          #C9A84C;
    --vm-gold-light:    #E8D5A3;
    --vm-gold-dark:     #A07828;
    --vm-navy:          #1A2744;
    --vm-navy-light:    #243560;
    --vm-cream:         #FAF8F3;
    --vm-cream-dark:    #F0EDE4;
    --vm-white:         #FFFFFF;
    --vm-black:         #0D0D0D;
    --vm-gray-100:      #F7F7F7;
    --vm-gray-200:      #E8E8E8;
    --vm-gray-500:      #888888;
    --vm-gray-800:      #2D2D2D;

    /* ── Testo semantico ──────────────────────────────────── */
    --vm-text-primary:  var(--vm-gray-800);
    --vm-text-light:    var(--vm-white);
    --vm-text-muted:    var(--vm-gray-500);

    /* ── Famiglie tipografiche ────────────────────────────── */
    --vm-font-heading:  'Playfair Display', 'Georgia', serif;
    --vm-font-body:     'Lato', 'Helvetica Neue', Arial, sans-serif;
    --vm-font-ui:       'Montserrat', 'Arial', sans-serif;

    /* ── Scale tipografica (rem) ──────────────────────────── */
    --vm-text-xs:    0.75rem;    /* 12px */
    --vm-text-sm:    0.875rem;   /* 14px */
    --vm-text-base:  1rem;       /* 16px */
    --vm-text-lg:    1.125rem;   /* 18px */
    --vm-text-xl:    1.25rem;    /* 20px */
    --vm-text-2xl:   1.5rem;     /* 24px */
    --vm-text-3xl:   1.875rem;   /* 30px */
    --vm-text-4xl:   2.25rem;    /* 36px */
    --vm-text-5xl:   3rem;       /* 48px */
    --vm-text-6xl:   3.75rem;    /* 60px */

    /* ── Spacing 4px-base ────────────────────────────────── */
    --vm-space-1:   0.25rem;
    --vm-space-2:   0.5rem;
    --vm-space-3:   0.75rem;
    --vm-space-4:   1rem;
    --vm-space-5:   1.25rem;
    --vm-space-6:   1.5rem;
    --vm-space-8:   2rem;
    --vm-space-10:  2.5rem;
    --vm-space-12:  3rem;
    --vm-space-16:  4rem;
    --vm-space-20:  5rem;
    --vm-space-24:  6rem;

    /* ── Border radius ───────────────────────────────────── */
    --vm-radius-sm:   4px;
    --vm-radius-md:   8px;
    --vm-radius-lg:   16px;
    --vm-radius-xl:   24px;
    --vm-radius-full: 9999px;

    /* ── Ombre ───────────────────────────────────────────── */
    --vm-shadow-sm:   0 1px 3px rgba(0, 0, 0, .12);
    --vm-shadow-md:   0 4px 16px rgba(0, 0, 0, .16);
    --vm-shadow-lg:   0 8px 32px rgba(0, 0, 0, .20);
    --vm-shadow-xl:   0 16px 48px rgba(0, 0, 0, .24);
    --vm-shadow-gold: 0 4px 20px rgba(201, 168, 76, .35);

    /* ── Transizioni ─────────────────────────────────────── */
    --vm-ease:             cubic-bezier(.4, 0, .2, 1);
    --vm-transition-fast:  150ms var(--vm-ease);
    --vm-transition-base:  300ms var(--vm-ease);
    --vm-transition-slow:  500ms var(--vm-ease);

    /* ── Z-index ─────────────────────────────────────────── */
    --vm-z-sticky:   100;
    --vm-z-dropdown: 200;
    --vm-z-modal:    300;
    --vm-z-toast:    400;

    /* ── Layout ──────────────────────────────────────────── */
    --vm-container-max:  1280px;
    --vm-header-h:       80px;
    --vm-sticky-bar-h:   60px;
}

/* ── Override mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --vm-text-5xl:  2.25rem;
        --vm-text-6xl:  2.75rem;
        --vm-header-h:  64px;
    }
}

/* ── Reset minimo ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--vm-font-body);
    color: var(--vm-text-primary);
    background-color: var(--vm-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vm-font-heading);
    line-height: 1.2;
    color: var(--vm-navy);
    margin-top: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--vm-gold-dark);
    text-decoration: none;
    transition: color var(--vm-transition-fast);
}

a:hover {
    color: var(--vm-gold);
}

/* ── Utility: padding bottom per sticky bar ─────────────── */
body {
    padding-bottom: var(--vm-sticky-bar-h);
}