/* =============================================================
   RIMA TAHA — CSS CUSTOM PROPERTIES
   variables.css | Version 1.0.0
   ============================================================= */

:root {
  /* ── Primary Colours ─────────────────────────────────────── */
  --deep-teal:  #1D4D5E;
  --teal:       #2E7A8A;
  --gold:       #D4A857;
  --cream:      #F7F2EA;
  --mist:       #E8E4DC;
  --ink:        #1A1A18;
  --white:      #FFFFFF;

  /* ── Secondary Colours ───────────────────────────────────── */
  --forest:     #1C3A2A;
  --sage:       #3D6B4F;
  --amber:      #B8873A;

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

  /* ── Type Scale ──────────────────────────────────────────── */
  --size-display: clamp(64px, 7vw, 96px);
  --size-h1:      clamp(44px, 6vw, 72px);
  --size-h2:      clamp(28px, 4vw, 44px);
  --size-h3:      clamp(22px, 2.5vw, 32px);
  --size-h4:      clamp(18px, 2vw, 26px);
  --size-body:    clamp(16px, 1.2vw, 18px);
  --size-small:   clamp(12px, 1vw, 14px);
  --size-label:   11px;

  /* ── Line Heights ────────────────────────────────────────── */
  --lh-body:     1.7;
  --lh-heading:  1.2;
  --lh-display:  1.05;

  /* ── Letter Spacing ──────────────────────────────────────── */
  --ls-label:    0.13em;
  --ls-display:  -0.01em;
  --ls-body:     0;

  /* ── Spacing ─────────────────────────────────────────────── */
  --section-padding:    120px;
  --section-padding-sm: 72px;
  --container-max:      1280px;
  --container-wide:     1440px;
  --grid-gap:           24px;

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

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(29, 77, 94, 0.08);
  --shadow-md:  0 8px 32px rgba(29, 77, 94, 0.12);
  --shadow-lg:  0 24px 64px rgba(29, 77, 94, 0.18);
  --shadow-gold: 0 0 24px rgba(212, 168, 87, 0.35);

  /* ── Animations ──────────────────────────────────────────── */
  --anim-fast:   0.2s ease;
  --anim-medium: 0.5s ease;
  --anim-slow:   0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-cookie:  400;

  /* ── Logo Section ────────────────────────────────────────── */
  --logo-height: 80px;
}

/* ── Responsive overrides ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-padding: 72px;
    --grid-gap: 16px;
  }
}