/* ============================================================
   ARAMAK Real Estate — Design Tokens
   ============================================================ */

:root {
  /* ── Colors ── */
  --color-green:        #2C3A2E;
  --color-green-dark:   #222D24;
  --color-green-light:  #3A4D3D;
  --color-ivory:        #F4ECE6;
  --color-ivory-light:  #FAF6F2;
  --color-sand:         #D5C2A6;
  --color-gold:         #85764E;
  --color-gold-light:   #A89872;
  --color-white:        #FFFFFF;
  --color-black:        #1A1A1A;
  --color-text:         #2C3A2E;
  --color-text-light:   #6B7A6E;
  --color-text-muted:   #8A9A8D;
  --color-overlay:      rgba(44, 58, 46, 0.75);
  --color-overlay-light:rgba(44, 58, 46, 0.55);
  --color-border:       rgba(133, 118, 78, 0.25);
  --color-border-light: rgba(213, 194, 166, 0.3);

  /* ── Typography ── */
  --font-primary:  'Avenir Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-light:    'Avenir Arabic Light', var(--font-primary);
  --font-book:     'Avenir Arabic Book', var(--font-primary);
  --font-heavy:    'Avenir Arabic Heavy', var(--font-primary);
  --font-black:    'Avenir Arabic Black', var(--font-primary);

  /* ── Font Sizes (fluid) ── */
  --fs-hero:       clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:         clamp(2rem, 3.5vw, 3.5rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:         clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:       clamp(0.95rem, 1.1vw, 1.125rem);
  --fs-body-lg:    clamp(1rem, 1.3vw, 1.25rem);
  --fs-small:      clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-caption:    clamp(0.7rem, 0.8vw, 0.8rem);
  --fs-stat:       clamp(2rem, 4vw, 4rem);
  --fs-nav:        clamp(0.85rem, 1vw, 1rem);

  /* ── Line Heights ── */
  --lh-tight:      1.2;
  --lh-normal:     1.6;
  --lh-relaxed:    1.8;
  --lh-loose:      2;

  /* ── Spacing ── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2.5rem;
  --space-xl:      4rem;
  --space-2xl:     6rem;
  --space-3xl:     8rem;
  --space-4xl:     10rem;

  /* ── Containers ── */
  --container-main:    min(90%, 1600px);
  --container-content: min(85%, 1200px);
  --container-narrow:  min(80%, 900px);
  --container-wide:    min(95%, 1800px);

  /* ── Borders ── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-pill:   50px;
  --radius-round:  50%;

  /* ── Transitions ── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.35s ease;
  --transition-slow:   0.6s ease;
  --transition-smooth: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Shadows ── */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Z-Index ── */
  --z-header:      100;
  --z-mobile-nav:  200;
  --z-overlay:     300;
  --z-modal:       400;

  /* ── Header ── */
  --header-height: 80px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --space-xl:  3rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
    --space-4xl: 6rem;
  }
}