/**
 * 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: #393838;
    --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: 80px;
    --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;
}