@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700;900&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300&family=Cairo:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Colors ── */
  --clr-bg:          #07070A;
  --clr-bg-2:        #0D0D12;
  --clr-bg-3:        #131318;
  --clr-bg-card:     rgba(255, 255, 255, 0.03);
  --clr-bg-card-hov: rgba(255, 255, 255, 0.055);

  --clr-gold:        #C9A227;
  --clr-gold-light:  #E8C97A;
  --clr-gold-dark:   #9A7A1A;
  --clr-gold-dim:    rgba(201, 162, 39, 0.55);
  --clr-gold-subtle: rgba(201, 162, 39, 0.10);
  --clr-gold-border: rgba(201, 162, 39, 0.05);

  --clr-text:        #EDE8DC;
  --clr-text-muted:  #8A7A60;
  --clr-text-dim:    #4A3E2C;

  --clr-whatsapp:    #25D366;
  --clr-wa-dark:     #128C7E;

  /* ── Typography ── */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:    'Raleway', 'Helvetica Neue', sans-serif;
  --font-arabic:  'Cairo', 'Arial', sans-serif;

  /* ── Layout ── */
  --nav-h:       80px;
  --container:   1200px;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

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

  /* ── Shadows ── */
  --shadow-gold:   0 0 60px rgba(201, 162, 39, 0.14), 0 0 120px rgba(201, 162, 39, 0.06);
  --shadow-card:   0 1px 0 rgba(201, 162, 39, 0.22), 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-dark:   0 4px 24px rgba(0, 0, 0, 0.45);

  /* ── Transitions ── */
  --transition:      0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --nav-h: 64px;
  }
}