/**
 * CSS Custom Properties - Design System
 * Partecipazione Matrimonio - Serena & Luca
 */

:root {
    /* === TEMA (classico) === */
    --color-primary: #8B4513;
    --color-primary-light: #A0522D;
    --color-primary-dark: #6B3410;
    --color-secondary: #D4AF37;
    --color-secondary-light: #E5C158;
    --color-secondary-dark: #B8960F;
    --color-accent: #722F37;
    --color-accent-light: #8B3A44;
    --color-accent-dark: #5A252C;
    --color-bg: #FDF5E6;
    --color-bg-dark: #F5ECD7;
    --color-bg-card: #FFFAF0;
    --color-bg-letter: #F8F0E3;
    --color-text: #2C1810;
    --color-text-light: #5D4E37;
    --color-text-muted: #8B7355;
    --color-text-inverse: #FFFAF0;
    --color-success: #4A7C59;
    --color-error: #9B2335;
    --color-warning: #CC8400;
    --border-color: rgba(139, 69, 19, 0.2);
    --border-color-light: rgba(139, 69, 19, 0.1);
    --shadow-sm: 0 1px 2px rgba(44, 24, 16, 0.05);
    --shadow-md: 0 4px 6px rgba(44, 24, 16, 0.1);
    --shadow-lg: 0 10px 15px rgba(44, 24, 16, 0.1);
    --shadow-xl: 0 20px 25px rgba(44, 24, 16, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(44, 24, 16, 0.05);
    --shadow-paper: 0 4px 20px rgba(44, 24, 16, 0.15), 0 2px 6px rgba(44, 24, 16, 0.1);
    /* === TIPOGRAFIA === */
    --font-display: 'Great Vibes', cursive;         /* Nomi sposi - calligrafico */
    --font-heading: 'Playfair Display', serif;      /* Titoli */
    --font-body: 'Lato', sans-serif;                /* Corpo testo */

    --font-size-xs: 0.8125rem;  /* 13px */
    --font-size-sm: 0.9375rem;  /* 15px */
    --font-size-base: 1.0625rem; /* 17px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.375rem;   /* 22px */
    --font-size-2xl: 1.75rem;   /* 28px */
    --font-size-3xl: 2.25rem;   /* 36px */
    --font-size-4xl: 3rem;      /* 48px */
    --font-size-5xl: 4rem;      /* 64px */
    --font-size-display: 5rem;  /* 80px - per nomi sposi */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === SPAZIATURA === */
    --spacing-xs: 0.25rem;      /* 4px */
    --spacing-sm: 0.5rem;       /* 8px */
    --spacing-md: 1rem;         /* 16px */
    --spacing-lg: 1.5rem;       /* 24px */
    --spacing-xl: 2rem;         /* 32px */
    --spacing-2xl: 3rem;        /* 48px */
    --spacing-3xl: 4rem;        /* 64px */
    --spacing-4xl: 6rem;        /* 96px */

    /* === BORDI === */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-full: 9999px;

    --border-width: 1px;
    --border-width-thick: 2px;

    /* === TRANSIZIONI === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 800ms ease;

    /* === Z-INDEX === */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-toast: 50;
    --z-letter: 100;
    --z-seal: 110;

    /* === DIMENSIONI SPECIFICHE === */
    --letter-max-width: 600px;
    --content-max-width: 800px;
    --section-padding-y: var(--spacing-3xl);

    /* Sigillo */
    --seal-size: clamp(120px, 15vmin, 180px);
    --seal-size-mobile: clamp(100px, 20vmin, 140px);
}

/* === RESPONSIVE ADJUSTMENTS === */
@media (max-width: 768px) {
    :root {
        --font-size-display: 3.5rem;  /* 56px */
        --font-size-5xl: 3rem;        /* 48px */
        --font-size-4xl: 2.5rem;      /* 40px */
        --font-size-3xl: 2rem;        /* 32px */
        --font-size-2xl: 1.5rem;      /* 24px */
        --section-padding-y: var(--spacing-2xl);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-display: 2.75rem; /* 44px */
        --font-size-5xl: 2.25rem;     /* 36px */
        --font-size-4xl: 2rem;        /* 32px */
        --font-size-3xl: 1.75rem;     /* 28px */
        --font-size-2xl: 1.375rem;    /* 22px */
    }
}