/* ==========================================================================
   Dana Club Links — design tokens.
   Ported subset of design-source/dana-club-design-system/project/colors_and_type.css.
   Tokens-only — no new hex colours.
   ========================================================================== */

:root {
  /* ---------- Colors — Pearl (page surface) ---------- */
  --color-pearl:     #FAF6EF;
  --color-pearl-50:  #FDFAF4;

  /* ---------- Colors — Stone (brand chrome — avatar background) ---------- */
  --color-stone:     #A8927A;
  --color-stone-50:  #F5F0E8;
  --color-stone-100: #EBE3D5;

  /* ---------- Colors — Mulberry (primary accent, social hover) ---------- */
  --color-mulberry:  #A33C5E;

  /* ---------- Colors — Ink (body + headings) ---------- */
  --color-ink:       #3A3632;

  /* ---------- Colors — Sand neutral scale (borders + secondary text) ---------- */
  --color-sand-100:  #F2EDE2;
  --color-sand-200:  #E5DFD2;
  --color-sand-300:  #D2CABA;
  --color-sand-400:  #B6AC99;
  --color-sand-500:  #948A77;
  --color-sand-600:  #756C5C;
  --color-sand-700:  #574F43;
  --color-sand-800:  #3B342C;
  --color-sand-900:  #221E18;

  /* ---------- Colors — Gold (section rule) ---------- */
  --color-gold:      #B08A4A;
  --color-gold-400:  #BC994E;

  /* ---------- Typography ---------- */
  --font-display-en: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body-en:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-ar: 'Noto Naskh Arabic', 'Tahoma', serif;
  --font-body-ar:    'Noto Naskh Arabic', 'Tahoma', sans-serif;

  --font-display:    var(--font-display-en), var(--font-display-ar);
  --font-body:       var(--font-body-en), var(--font-body-ar);
  --font-arabic:     'Noto Naskh Arabic', 'Tahoma', sans-serif;

  /* ---------- Radii ---------- */
  --radius-sm:       2px;
  --radius-md:       6px;
  --radius-lg:       12px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(15, 26, 42, 0.04), 0 2px 8px rgba(15, 26, 42, 0.04);
  --shadow-2: 0 4px 16px rgba(15, 26, 42, 0.08);

  /* ---------- Motion ---------- */
  --ease-quiet: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-base:   200ms;

  /* ---------- Layout ---------- */
  --header-h:   0px; /* The theme has no chrome header — the Linktree fills the viewport. */
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-pearl);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[dir="rtl"] body {
  font-family: var(--font-body-ar), var(--font-body-en);
}

/* Focus ring — visible, mulberry, accessible. */
:focus-visible {
  outline: 2px solid var(--color-mulberry);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}