/* ==========================================================================
   Design tokens — ported from the live bufeh.com stylesheet.

   TIER 1 (--c-*) are the raw brand values.
   TIER 2 (--brand*) are the legacy aliases this codebase already ships. They are
   re-pointed at Tier 1 rather than deleted, so every existing rule
   (.btn-brand, .text-brand, .badge-info, .recipe-card) keeps a definition and
   nothing silently loses its colour.
   ========================================================================== */

:root {
  /* --- Tier 1: bufeh.com palette --------------------------------------- */
  --c-charcoal:     #31302e;  /* primary button surface, white text */
  --c-charcoal-700: #201f1e;
  --c-gold:         #ffcc01;  /* signature accent; primary button hover */
  --c-gold-600:     #e6b800;
  --c-darkbrown:    #250909;  /* header / footer band */
  --c-olive:        #666600;  /* body links */
  --c-olive-hover:  #76761a;
  --c-olive-dark:   #33330f;
  --c-crimson:      #850a0e;  /* image overlays */
  --c-crimson-800:  #8a0202;
  --c-blue:         #366da3;  /* tag links */
  --c-blue-dark:    #184777;
  --c-blue-note:    #06539b;

  /* Neutrals */
  --c-n-0:   #ffffff;
  --c-n-50:  #f9f9f9;
  --c-n-100: #e9ecef;
  --c-n-300: #cdcdcd;
  --c-n-400: #aaaaaa;
  --c-n-500: #888888;
  --c-n-700: #484848;
  --c-n-900: #171717;

  /* --- Tier 2: legacy aliases — DO NOT DELETE --------------------------
     Existing templates and rules reference these names.                   */
  --brand:       var(--c-charcoal);
  --brand-light: var(--c-gold);
  --brand-soft:  var(--c-n-50);

  /* --- Semantic -------------------------------------------------------- */
  --body-bg:      var(--c-n-0);
  --surface:      var(--c-n-50);
  --text:         var(--c-n-900);
  --text-muted:   var(--c-n-500);
  --border:       var(--c-n-300);
  --link:         var(--c-olive);
  --link-hover:   var(--c-olive-hover);

  --radius:    0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 .25rem .75rem rgba(37, 9, 9, .06);
  --shadow-md: 0 1rem 2rem rgba(37, 9, 9, .14);
}

/* --------------------------------------------------------------------------
   RTL (Phase 7). Bootstrap's .rtl build flips layout/utilities; these rules
   cover what it can't: the Persian typeface and the few decorative bits.
   `[dir="rtl"] X` outspecifies the base `X` rule, so load order is irrelevant.
   -------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .font-serif {
  /* Playfair Display + Nunito have no Arabic-script glyphs; Vazirmatn does. */
  font-family: "Vazirmatn", "Nunito", sans-serif;
}

/* The section-heading underline already uses inset-inline-start, so it hugs
   the correct edge automatically. The Playfair heading falls back to Vazirmatn
   above. Nothing else here needs a directional override — everything ships
   with logical properties. */