/* ============================================================================
   KALAMEH WEBSITE — DESIGN TOKENS
   ----------------------------------------------------------------------------
   This is the single source of truth for the website's colors, type, spacing,
   and radii. Every page in the static reference uses these values (they are
   currently inlined in each page's <style> block — this file consolidates and
   documents them so they can be dropped into the Drupal theme's global CSS).

   HOW TO USE IN DRUPAL 11:
   - Load this file in your theme (e.g. via the theme .libraries.yml as a
     global CSS asset) so the custom properties are available everywhere.
   - Reference tokens with var(--token) in component CSS / SDC styles.
   - The per-section accent system is explained under "SECTION ACCENTS" below.
   ========================================================================== */

:root {
  /* ---- Editorial base palette --------------------------------------------
     Intentionally warmer/neutral so the SITE reads as an editorial
     publication, distinct from the APP's teal chrome. The app brand still
     appears (CTAs, link hover) but never dominates. */
  --ink:        #0F1114;   /* primary text */
  --ink-2:      #3C3C43;   /* secondary text */
  --ink-3:      #8E8E93;   /* tertiary text / captions */
  --paper:      #FFFFFF;   /* page background */
  --paper-2:    #F2F2F7;   /* raised surfaces / fills */
  --paper-3:    #FBFAF7;   /* warm off-white band background */
  --line:       #E5E5EA;   /* hairline borders */
  --line-2:     #D1D1D6;   /* stronger dividers */

  /* ---- Brand (shared with the app) --------------------------------------- */
  --brand:      #4BBBDD;   /* Kalameh teal — primary CTAs, links */
  --brand-deep: #2D97BA;   /* hover / pressed */
  --teal:       #4BBBDD;   /* alias of --brand */

  /* ---- Status / semantic -------------------------------------------------- */
  --gate:       #B23A48;   /* "app-only / gated" accent (red) */
  --open:       #2E7D5B;   /* "free / open" accent (green) */

  /* ---- Type families ------------------------------------------------------
     SERIF  — English display/headings & pull-quotes. Newsreader is bundled
              (fonts/, SIL OFL 1.1); system serifs are the fallback.
     SANS   — English UI/body. Inter is bundled (fonts/).
     FARSI  — All Farsi/RTL text + Farsi headings. Vazirmatn is bundled. */
  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --farsi: "Vazirmatn", "IRANSans", "Iranian Sans", system-ui, sans-serif;
  /* Alias used by many SDCs for bilingual headings. LTR → Latin serif; RTL remaps below. */
  --serif-fa: var(--serif);

  /* ---- Type scale (px; matches the reference pages) ----------------------- */
  --fs-eyebrow:  13px;   /* uppercase section labels (was 11px — bumped for readability) */
  --fs-body:     16px;
  --fs-lede:     19px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       36px;
  --fs-h1:       54px;   /* hero display */
  --lh-body:     1.55;
  --lh-display:  1.04;

  /* ---- Layout & spacing --------------------------------------------------- */
  --wrap-max:        1280px;  /* .wrap */
  --wrap-narrow-max: 880px;   /* .wrap-narrow */
  --wrap-pad:        32px;    /* horizontal page gutter (desktop) */
  --section-y:       96px;    /* vertical rhythm between major sections */

  /* ---- Radii & elevation -------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --shadow-card: 0 6px 16px rgba(15,30,45,0.10), 0 1px 3px rgba(15,30,45,0.06);

  /* ---- SECTION ACCENTS ---------------------------------------------------- 
     Each content section ("environment") owns a color identity, matching the
     app. On a section's pages the shared accent variables (--accent / --accent-
     deep / --accent-tint) are REMAPPED to that section's values, so a single
     set of component styles re-skins per section. The canonical values: */

  /* Fellowship — purple (community) */
  --fellowship-base: #A862C9;  --fellowship-deep: #5A3D75;  --fellowship-tint: #ECE1F2;
  /* Bible — green (scholarship) */
  --bible-base:      #59B573;  --bible-deep:      #41A769;  --bible-tint:      #E4F3E8;
  /* Library — amber (books & articles) */
  --library-base:    #E89A3C;  --library-deep:    #B0701F;  --library-tint:    #FBEAD3;
  /* Audio — teal (calm listening) */
  --audio-base:      #4A95AC;  --audio-deep:      #2C6A7E;  --audio-tint:      #DCEAEF;
  /* Video — coral (energy) */
  --video-base:      #EB584D;  --video-deep:      #D7483A;  --video-tint:      #FBE0DD;
  /* Worship Team — magenta (craft) */
  --worship-base:    #A53C7E;  --worship-deep:    #8E2A66;  --worship-tint:    #F8E5F0;

  /* Default accent = brand teal; section pages override these three. */
  --accent:      var(--brand);
  --accent-deep: var(--brand-deep);
  --accent-tint: var(--paper-2);
}

/* ----------------------------------------------------------------------------
   PER-SECTION REMAP — example.
   On a Worship page, set these on a wrapping scope (or :root of that page) and
   every accent-driven component (chips, hovers, key/chord markers, filter UI,
   highlighted rows) re-skins to Worship magenta automatically:

     .section--worship {
       --accent:      var(--worship-base);
       --accent-deep: var(--worship-deep);
       --accent-tint: var(--worship-tint);
     }

   NOTE for the developer: in the current static reference, some pages express
   this remap through legacy variable names (e.g. --fel / --fel-deep / --fel-
   tint were reused as the generic accent slots). When you componentize, prefer
   the clean --accent / --accent-deep / --accent-tint names above.
   -------------------------------------------------------------------------- */

/* PER-SECTION ACCENT SCOPES — implemented.
   Add `section--<name>` on any wrapper (or an SDC root) and every component that
   reads --accent / --accent-deep / --accent-tint re-skins to that section. */
.section--fellowship { --accent: var(--fellowship-base); --accent-deep: var(--fellowship-deep); --accent-tint: var(--fellowship-tint); }
.section--bible      {
  --accent: var(--bible-base);
  --accent-deep: var(--bible-deep);
  --accent-tint: var(--bible-tint);
  /* Mockup names used by bible-landing.css + bible-reader.css */
  --bible: #41A769;
  --bible-deep: #2E7F4F;
}
.section--library    { --accent: var(--library-base);    --accent-deep: var(--library-deep);    --accent-tint: var(--library-tint); }
.section--audio      { --accent: var(--audio-base);       --accent-deep: var(--audio-deep);       --accent-tint: var(--audio-tint); }
.section--video      { --accent: var(--video-base);       --accent-deep: var(--video-deep);       --accent-tint: var(--video-tint); }
.section--worship    { --accent: var(--worship-base);     --accent-deep: var(--worship-deep);     --accent-tint: var(--worship-tint); }

/* RTL: Farsi pages set dir="rtl" lang="fa" on <html> and use --farsi. */
[dir="rtl"] {
  --serif-fa: var(--farsi);
}
[dir="rtl"] body { font-family: var(--farsi); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--farsi); font-weight: 700; letter-spacing: 0; }

/* Site-wide eyebrow size. Components often hard-code 11px; this keeps one
   knob (--fs-eyebrow) and wins over those overrides. Phone-mock labels that
   are intentionally tiny stay excluded. */
.eyebrow,
[class*="eyebrow"]:not(.aa-feed-eyebrow):not(.hero-app-eyebrow) {
  font-size: var(--fs-eyebrow) !important;
}

/* Eyebrows are Latin UI labels (uppercase + tracking). On Farsi that tracking
   breaks connected Arabic script and looks like a broken fallback font — keep
   Vazirmatn, drop uppercase, tighten tracking, and use a larger size (16px)
   so the label stays readable without Latin all-caps. */
html[dir="rtl"] {
  --fs-eyebrow: 16px;
}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] [class*="eyebrow"] {
  font-family: var(--farsi) !important;
  letter-spacing: 0.15px !important;
  text-transform: none !important;
}