@import url('https://fonts.googleapis.com/css2?family=Zain:wght@300;400;700;800;900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ── Colors ── */
  --c-primary:      #052c34;
  --c-primary-mid:  #0a4a57;
  --c-primary-soft: #0d5f72;
  --c-gold:         #c8a97a;
  --c-gold-light:   #e8d5b7;
  --c-gold-pale:    #f5e6cc;
  --c-cream:        #f7f0e6;
  --c-cream-dark:   #ede4d6;
  --c-white:        #ffffff;
  --c-ink:          #1a0e05;
  --c-ink-mid:      #4a3728;
  --c-ink-light:    #9a8878;
  --c-border:       rgba(200, 169, 122, 0.2);
  --c-border-mid:   rgba(200, 169, 122, 0.4);

  /* ── Typography ── */
  --font-main: 'Zain', sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(5, 44, 52, 0.06);
  --shadow-md:  0 8px 24px rgba(5, 44, 52, 0.10);
  --shadow-lg:  0 20px 48px rgba(5, 44, 52, 0.14);
  --shadow-xl:  0 32px 72px rgba(5, 44, 52, 0.18);

  /* ── Transitions ── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 180ms var(--ease);
  --t-mid:  300ms var(--ease);
  --t-slow: 500ms var(--ease);

  /* ── Layout ── */
  --max-w: 1200px;
  --header-h: 72px;
  --tabs-h: 52px;
}