/* ============================================
   NICHOLAS VICHI IMMOBILIARE — Design Tokens
   Palette allineata al mockup originale
   ============================================ */

:root {
  /* ── Primary: Navy/Blu ── */
  --navy:           #000080;
  --navy-dark:      #00006B;
  --navy-light:     #1E90FF;
  --royal:          #4169E1;
  --steel:          #4682B4;

  /* ── Gold Accent ── */
  --gold:           #E7B928;
  --gold-light:     #FFD700;
  --gold-dark:      #B8941F;
  --gold-hover:     #D4A825;
  --gold-muted:     rgba(231, 185, 40, 0.15);

  /* ── Grays ── */
  --gray-100:       #F7F6F3;
  --gray-200:       #ECECEA;
  --gray-300:       #B0B0B0;
  --gray-400:       #808080;
  --gray-500:       #696969;
  --gray-600:       #708090;
  --gray-900:       #1A1A2E;

  /* ── Semantic ── */
  --color-white:    #ffffff;
  --color-text:     #1A1A2E;
  --color-text-light: #696969;
  --color-text-inv: #ECECEA;
  --color-overlay:  rgba(0, 0, 128, 0.7);
  --color-success:  #2e7d5b;
  --color-error:    #c0392b;

  /* ── Typography ── */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Outfit', sans-serif;

  --fs-xs:    0.625rem;   /* 10px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  0.875rem;   /* 14px */
  --fs-md:    1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */
  --fs-2xl:   1.5rem;     /* 24px */
  --fs-3xl:   2rem;       /* 32px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-hero:  clamp(2rem, 3.5vw, 3rem);

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

  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.6;
  --lh-relaxed:  1.8;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.1em;
  --ls-wider:    0.2em;
  --ls-widest:   0.25em;

  /* ── Spacing ── */
  --space-xs:    0.25rem;
  --space-sm:    0.5rem;
  --space-md:    1rem;
  --space-lg:    1.5rem;
  --space-xl:    2rem;
  --space-2xl:   3rem;
  --space-3xl:   4rem;
  --space-4xl:   6rem;
  --space-5xl:   8rem;
  --space-section: 100px;

  /* ── Layout ── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-pad:  48px;
  --header-height:  72px;

  /* ── Borders & Radius ── */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --border-thin: 1px solid var(--gray-200);

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 128, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 128, 0.06);
  --shadow-lg:    0 20px 60px rgba(0, 0, 128, 0.08);
  --shadow-xl:    0 30px 80px rgba(0, 0, 128, 0.12);

  /* ── Transitions ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     0.2s;
  --dur-normal:   0.3s;
  --dur-slow:     0.4s;

  /* ── Z-Index ── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    500;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-whatsapp:  1100;
}