/* ==========================================================================
   IBC design tokens
   Editorial-luxury direction: warm paper ground, deep indigo ink, gold accent.
   Everything downstream references these; no raw hex values in app.css.
   ========================================================================== */

:root {
  /* ---- palette -------------------------------------------------------- */
  --paper:        #FAF7F2;   /* page ground */
  --paper-2:      #F3EEE6;   /* alternating band */
  --surface:      #FFFFFF;   /* cards */
  --ink:          #14110E;   /* primary text */
  --ink-2:        #5A544C;   /* secondary text */
  --ink-3:        #8A8279;   /* tertiary / meta */
  --line:         #E4DCD0;   /* hairlines */
  --line-2:       #D3C8B7;

  --indigo:       #1B3B6F;   /* brand / links / primary action */
  --indigo-ink:   #12294D;
  --indigo-wash:  #EAEFF7;

  --gold:         #C9A227;   /* accents, ratings, verified */
  --gold-wash:    #FBF3DC;

  --clay:         #A8482F;   /* alerts, "closed" */
  --sage:         #4F7A56;   /* "open now" */
  --sage-wash:    #EAF3EB;

  /* ---- typography ----------------------------------------------------- */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-fa:      "Vazirmatn", var(--font-body);

  /* fluid scale, 1.200 minor third */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.15rem, 0.4vw + 1.05rem, 1.35rem);
  --t-xl:   clamp(1.45rem, 1vw + 1.2rem, 1.9rem);
  --t-2xl:  clamp(1.9rem, 2vw + 1.4rem, 2.9rem);
  --t-3xl:  clamp(2.4rem, 3.6vw + 1.5rem, 4.2rem);

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  /* ---- space (4px base) ----------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  /* ---- shape ---------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(20, 17, 14, .04), 0 1px 3px rgba(20, 17, 14, .06);
  --shadow-2: 0 4px 6px -2px rgba(20, 17, 14, .05), 0 12px 24px -6px rgba(20, 17, 14, .10);
  --shadow-3: 0 8px 12px -4px rgba(20, 17, 14, .06), 0 24px 48px -12px rgba(20, 17, 14, .16);

  /* ---- layout --------------------------------------------------------- */
  --wrap:      1240px;
  --wrap-text: 68ch;
  --header-h:  72px;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  180ms;
}

/* Persian / RTL: different face, slightly looser leading for Arabic script. */
:root:lang(fa),
[dir="rtl"] {
  --font-body:    var(--font-fa);
  --font-display: var(--font-fa);
  --lh-body:      1.85;
  --lh-snug:      1.5;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}