/**
 * Variables — Design Tokens
 * Cristina Mazzitelli Interior Design Studio
 *
 * Sistema di token centralizzato. Modifica qui per aggiornare l'intero sito.
 */

:root {

    /* ── Palette Primaria ──────────────────────────────────────────────── */
    --color-anthracite:      #1A1A1A;   /* Tipografia principale */
    --color-ivory:           #FAF8F5;   /* Sfondo principale */
    --color-champagne:       #F2EDE6;   /* Sfondo sezioni alternate */
    --color-white:           #FFFFFF;   /* Card, overlay, pure white */

    /* ── Accenti Logo (calibrati, mai invadenti) ──────────────────────── */
    --color-lavender:        #C9B8D8;   /* Hover, dettagli soft */
    --color-magenta:         #C8638C;   /* CTA primario, highlight */
    --color-lime:            #C8D46A;   /* Badge, tag attivi */
    --color-aqua:            #7EC8D4;   /* Link secondari, divider */

    /* Versioni più scure per hover */
    --color-lavender-dark:   #A898BC;
    --color-magenta-dark:    #A8476F;
    --color-lime-dark:       #A8B44A;
    --color-aqua-dark:       #5AAAB6;

    /* Versioni alpha per overlay */
    --color-lavender-alpha:  rgba(201,184,216, 0.18);
    --color-magenta-alpha:   rgba(200,99,140,  0.10);

    /* ── Grigi Neutrali ───────────────────────────────────────────────── */
    --color-text-primary:    #1A1A1A;
    --color-text-secondary:  #6B6460;
    --color-text-muted:      #A8A09A;
    --color-border:          #E8E2DA;
    --color-border-light:    #F0EBE3;

    /* ── Overlay ──────────────────────────────────────────────────────── */
    --overlay-dark:          rgba(26,26,26, 0.72);
    --overlay-darker:        rgba(26,26,26, 0.85);
    --overlay-light:         rgba(250,248,245, 0.85);

    /* ── Tipografia ───────────────────────────────────────────────────── */
    --font-display:   'Cormorant Garamond', 'Georgia', serif;
    --font-body:      'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:      'DM Mono', 'Courier New', monospace;

    /* Scale tipografica */
    --text-xs:     0.75rem;    /* 12px — label micro */
    --text-sm:     0.8125rem;  /* 13px — caption */
    --text-base:   1rem;       /* 16px — body */
    --text-md:     1.125rem;   /* 18px — body large */
    --text-lg:     1.375rem;   /* 22px — H4 */
    --text-xl:     1.75rem;    /* 28px — H3 */
    --text-2xl:    2.25rem;    /* 36px — H2 */
    --text-3xl:    3rem;       /* 48px — H1 */
    --text-4xl:    4rem;       /* 64px — Display */
    --text-5xl:    5.5rem;     /* 88px — Hero headline */
    --text-6xl:    7rem;       /* 112px — Display max */

    /* Letter spacing */
    --ls-tight:    -0.02em;
    --ls-normal:   0;
    --ls-wide:     0.05em;
    --ls-wider:    0.12em;
    --ls-widest:   0.18em;     /* Label uppercase */

    /* Line heights */
    --lh-tight:    1.1;
    --lh-snug:     1.25;
    --lh-normal:   1.5;
    --lh-relaxed:  1.7;
    --lh-loose:    1.9;

    /* ── Spacing ──────────────────────────────────────────────────────── */
    --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 */
    --space-24:  6rem;       /* 96px */
    --space-32:  8rem;       /* 128px */
    --space-40:  10rem;      /* 160px */
    --space-48:  12rem;      /* 192px */

    /* ── Layout ───────────────────────────────────────────────────────── */
    --max-width:        1440px;
    --content-width:    1200px;
    --content-narrow:   800px;
    --content-wide:     1360px;
    --gutter:           2rem;       /* 32px */
    --gutter-sm:        1.25rem;    /* 20px */

    /* ── Header ──────────────────────────────────────────────────────── */
    --header-height:       88px;
    --header-height-sm:    64px;
    --header-bg:           rgba(250,248,245, 0.96);
    --header-border:       rgba(232,226,218, 0.6);

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

    /* ── Shadows ──────────────────────────────────────────────────────── */
    --shadow-xs:   0 1px 3px rgba(26,26,26,0.06);
    --shadow-sm:   0 2px 8px rgba(26,26,26,0.08);
    --shadow-md:   0 8px 24px rgba(26,26,26,0.10);
    --shadow-lg:   0 16px 48px rgba(26,26,26,0.14);
    --shadow-xl:   0 24px 64px rgba(26,26,26,0.18);

    /* ── Transizioni ──────────────────────────────────────────────────── */
    --transition-fast:     150ms ease;
    --transition-base:     280ms ease;
    --transition-slow:     480ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-xslow:    700ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing curves */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-Index ──────────────────────────────────────────────────────── */
    --z-base:       1;
    --z-above:      10;
    --z-header:     100;
    --z-mobile-menu:200;
    --z-lightbox:   300;
    --z-cursor:     9999;
}