/* ==========================================================================
   MAKKAH MASJID BOLTON — design tokens
   Terracotta (from the client's logo) + gold. Sage has been retired.
   Tokens ONLY. Swap this file to re-skin the whole site.
   Must load BEFORE tw-config.js.
   ========================================================================== */

:root {
  /* ---- Terracotta: the brand. #8C311E is the logo mark and wordmark, and the
          most-used colour in the old site's CSS. 8.16:1 on white. ---------- */
  --c-brand-50:  #fbf0ed;
  --c-brand-100: #f6e0da;
  --c-brand-200: #ebc0b4;
  --c-brand-300: #dc9985;
  --c-brand-400: #c46a52;
  --c-brand-500: #a63f28;
  --c-brand-600: #8c311e;   /* ← LOGO TERRACOTTA */
  --c-brand-700: #7a2b1a;
  --c-brand-800: #5e2114;
  --c-brand-900: #3f1710;


  /* ---- Accent set ------------------------------------------------------
     Four decorative hues agreed with the client for filled cards and links.
     Deep and muted so they read as a jewel-tone set beside terracotta, and
     well separated on the wheel: 11 / 178 / 219 / 82 degrees.
     White clears 4.5:1 on every LIGHT end - that is the worst case.
        a1 terracotta  6.24:1   a2 teal    7.14:1
        a3 indigo     10.51:1   a4 moss    5.82:1                          */
  /* stall plan states. Every one also carries a symbol, so colour is a
     reinforcement and never the only signal (WCAG 1.4.1). */
  --c-free:      #15724a;   /* available  */
  --c-sel:       #c8a24a;   /* selected   */
  --c-taken:     #9a2b2b;   /* booked     */
  --c-block:     #e9e7e4;   /* not for hire. Was #e6e7ea at hue 225 — the one
                               cool grey among the warm surfaces. */
  --c-block-ink: var(--c-n6); /* 6.18:1 on the tile, up from 4.74 */

  --a1-d: #8c311e;  --a1-l: #a63f28;  --a1-x: #6b2015;  --a1-t: #fbf0ed;
  --a2-d: #0e4749;  --a2-l: #14625f;  --a2-x: #0a3335;  --a2-t: #e7f2f2;
  --a3-d: #1f2d4a;  --a3-l: #2c3f63;  --a3-x: #141f33;  --a3-t: #eaeef6;
  --a4-d: #3f5220;  --a4-l: #556d2b;  --a4-x: #2c3a16;  --a4-t: #eef2e4;

  /* ---- Gold: the secondary. Replaces the logo's sage entirely.
          IMPORTANT: gold is a FILL colour on dark, not type on white.
          500 is 2.41:1 on white — only 700 and 800 are safe for text. ---- */
  --c-gold-50:  #fbf7ec;
  --c-gold-100: #f5ecd2;
  --c-gold-200: #ead79b;
  --c-gold-300: #dcc176;
  --c-gold-400: #d8b968;
  --c-gold-500: #c8a24a;   /* ← the gold. On dark only */
  --c-gold-600: #a67c1a;
  --c-gold-700: #8a6d1f;   /* 4.90:1 on white — safe for text */
  --c-gold-800: #6b4f12;   /* 7.63:1 on white — safe for text + white on it */
  --c-gold-900: #4a360c;

  /* ---- Neutrals: one warm ramp ----------------------------------------------------
     The neutrals used to run in four different directions at once: warm beige
     surfaces (hue 38-44), cool slate text (218-219), a green-black body ink
     (150) and warm brown bands (15-16). Cool grey text on a warm cream page is
     what made the secondary copy look slightly dirty.

     One warm ramp, hue 31-40 throughout, six steps. Separation between steps
     is even: 1.26, 1.32, 1.67, 1.63, 1.28. n4 is solved for 3:1 on SAND, the
     worst light ground it can sit on, not on white — a boundary that only
     passes on the page background is no use on a cream band. Every
     replacement beats the value it replaced on all three light grounds.

       step   hex       white  cream   sand   role
       n1     #e4e0d9    1.32   1.20   1.09   hairline
       n2     #cfc8be    1.66   1.51   1.37   disabled ground
       n3     #b8ae9a    2.20   2.00   1.82   visible boundary
       n4     #8f8477    3.66   3.33   3.03   UI component boundaries (1.4.11)
       n5     #6c6257    5.96   5.42   4.93   meta text, placeholders
       n6     #5c5247    7.63   6.94   6.31   secondary text, disabled ink
  */
  --c-n1: #e4e0d9;
  --c-n2: #cfc8be;
  --c-n3: #b8ae9a;
  --c-n4: #8f8477;
  --c-n5: #6c6257;
  --c-n6: #5c5247;

  --c-ink:      #26211d;   /* body text  15.94:1 white. Was #1c2420, a green-
                              black at hue 150 — the only thing on the site
                              pulling that way. Warmed to hue 27 at the same
                              contrast (15.88 -> 15.94). */
  --c-ink-soft: var(--c-n6);   /* secondary  7.63:1 white (was #4a5568, 7.53) */
  --c-faint:    var(--c-n5);   /* meta. 5.96:1 white, 5.42 cream, 4.93 sand —
                                  beats the cool #5f6570 it replaces on all
                                  three (5.86 / 5.33 / 4.85). */

  --c-dark:     #2b1a14;   /* warm near-black: footer, dark bands */
  --c-darker:   #1d110d;
  --c-bg:       #ffffff;
  --c-cream:    #f7f4ec;   /* warm section background */
  --c-sand:     #efe9dc;   /* sunken panels */
  --c-line:     var(--c-n1);   /* warm hairline */
  --c-line-2:   var(--c-n3);   /* the hairline where it has to be seen rather
                                  than felt: 2.20:1 on white, 2.00 on cream. */

  /* ---- white on a dark ground --------------------------------------
     Two ladders, because they do different jobs and were tangled together:
     ink (text) and surface (rules, fills, borders). The stylesheet held 15
     alphas of white and the markup another 5 — eleven distinct values
     reached the screen as text colour alone.

     Steps match Tailwind's integer percentages, so `text-white/85` and the
     token below cannot drift apart. Ink folds UPWARD: every value that
     moved gained contrast or held it. */
  --on-dark-1: rgba(255,255,255,.95);   /* primary text on dark   */
  --on-dark-2: rgba(255,255,255,.85);   /* secondary              */
  --on-dark-3: rgba(255,255,255,.60);   /* meta, captions         */

  --line-on-dark-1: rgba(255,255,255,.30);  /* a border meant to be seen */
  --line-on-dark-2: rgba(255,255,255,.14);  /* a divider felt, not seen  */
  --line-on-dark-3: rgba(255,255,255,.06);  /* the faintest wash         */

  /* Three jobs the two ladders above do not cover, named rather than
     forced onto a step that would break them. */
  --edge-on-dark: rgba(255,255,255,.55);   /* an outline button's border: it
                                              identifies a control, so 1.4.11
                                              wants it seen, not felt */
  --fill-on-dark: rgba(255,255,255,.72);   /* glass chips over a dark ground */

  --c-success: #1f7a5c;
  --c-danger:  #b3261e;

  /* ---- Signature gradients --------------------------------------------- */
  --g-brand:  linear-gradient(135deg, #8c311e 0%, #a63f28 100%);
  --g-deep:   linear-gradient(135deg, #5e2114 0%, #2b1a14 100%);
  --g-warm:   linear-gradient(135deg, #8c311e 0%, #c8a24a 100%);
  --g-gold:   linear-gradient(135deg, #c8a24a 0%, #ead79b 100%);
  --g-goldink: linear-gradient(135deg, #6b4f12 0%, #a67c1a 100%);  /* white type is safe on this */
  --g-overlay: linear-gradient(135deg, rgba(43,26,20,.92) 0%, rgba(94,33,20,.80) 100%);
  --g-veil:   linear-gradient(to top, rgba(29,17,13,.95) 0%, rgba(29,17,13,.45) 45%, transparent 100%);

  /* ---- Shape ------------------------------------------------------------ */
  --radius-xs:     4px;
  --radius-sm:     10px;
  --radius-card:   16px;
  --radius-lg:     24px;
  --radius-pill:   9999px;   /* also the right value for a circle on a square
                                element — 99px and 999px were doing this job in
                                28 places and are folded in */
  --radius-circle: 50%;      /* only where the element is NOT square */

  /* ---- spacing -------------------------------------------------------
     Derived from what the design actually uses, not imposed on it. The
     stylesheet holds 48 distinct spacing values across 714 declarations;
     folding everything within 1.6px (or 10%, whichever is larger) gives
     these steps and moves nothing by more than 8px on a 96px value.

     The full fold is NOT applied wholesale: it would move 45% of
     declarations by 1–2px, which nobody perceives in isolation and which
     risks more than it gains. What readers do notice is two similar
     components side by side that differ, so the folds are applied there.
     New work uses these steps; anything outside them wants a reason. */
  --sp-1:   0.2rem;    /*  3.2px  icon nudges, inline gaps */
  --sp-2:   0.35rem;   /*  5.6px */
  --sp-3:   0.5rem;    /*  8px    the common small gap */
  --sp-4:   0.7rem;    /* 11.2px */
  --sp-5:   0.8rem;    /* 12.8px */
  --sp-6:   1rem;      /* 16px    the workhorse */
  --sp-7:   1.25rem;   /* 20px */
  --sp-8:   1.5rem;    /* 24px */
  --sp-9:   1.75rem;   /* 28px */
  --sp-10:  2rem;      /* 32px    card padding */
  --sp-11:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-13:  3.5rem;    /* 56px */
  --sp-14:  4rem;      /* 64px    section rhythm starts here */

  /* ---- layering ------------------------------------------------------
     Twelve ad-hoc z-indexes, now a ladder with names. Values 0–5 inside a
     component are local stacking and stay as they are; these are the ones
     that decide what covers what across the whole page. */
  --z-header:   50;
  --z-nav:      60;
  --z-float:    70;    /* back-to-top, review bars */
  --z-backdrop: 80;
  --z-drawer:   90;
  --z-modal:    120;   /* dialogs and the lightbox */
  --z-skip:     200;   /* the skip link clears everything */

  /* ---- Elevation: warm-tinted, never neutral grey ---------------------- */
  --shadow-sm:    0 1px 2px rgba(43,26,20,.06);
  --shadow-card:  0 4px 20px -6px rgba(43,26,20,.10);
  --shadow-lift:  0 20px 44px -16px rgba(43,26,20,.24);
  --shadow-brand: 0 16px 34px -12px rgba(140,49,30,.42);
  --shadow-gold:  0 16px 34px -12px rgba(200,162,74,.40);

  /* ---- Type ------------------------------------------------------------- */
  --font-ui:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Headings. Body copy stays Poppins — the reading text is settled.
     font-size-adjust, never a font-size multiplier: `em` inside font-size
     resolves against the PARENT, so calc(1em * n) would destroy every
     heading's own clamp. 0.491 = Fraunces's measured x-height ratio (.45)
     times the 1.09 correction it needs against Poppins's unusually large
     x-height. Swapping the face is these two lines and nothing else. */
  --font-head:     'Fraunces', Georgia, 'Times New Roman', serif;
  --font-head-adj: 0.491;
  /* Two Arabic faces, chosen by job:
     - UI: Noto Naskh Arabic. Screen-optimised, stays legible at label size
       next to English, and has real weights. Used for prayer names, chips,
       anything small or inline.
     - Scripture: Amiri. A Qur'anic Naskh face - beautiful large, too fine
       and low-contrast at 14-16px. Used only for Qur'an, hadith and du'a. */

  /* ---- type scale ----------------------------------------------------
     The stylesheet had grown 70 distinct font sizes, thirteen of them
     between .72 and .95rem. These are the steps; anything outside them is
     a deliberate display size (watermark numerals, the hero clock). */
  --fs-4xs:   0.625rem;
  --fs-3xs:   0.7rem;
  --fs-2xs:   0.75rem;
  --fs-xs:    0.8rem;
  --fs-sm:    0.875rem;
  --fs-md:    0.95rem;
  --fs-base:  1.0rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.3rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.75rem;
  --fs-4xl:   2.1rem;
  --fs-5xl:   2.6rem;


  /* ---- line height and tracking -------------------------------------- */
  --lh-flat:     1.0;
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-base:     1.5;    /* 1.5, not 1.55, so the token matches the value the
                            document root already inherits. The two differed by
                            3% — imperceptible, but it split body copy across two
                            leadings for no reason. */
  --lh-relaxed:  1.75;

  /* Arabic needs more leading than Latin at the same size: the harakat sit
     above and below the baseline, and at 1.5 they crowd the line above.
     42 of 47 Arabic elements were leading at 1.5 — the Latin body value.
     Scripture set in Amiri carries full vowel marks and needs the most. */
  --lh-ar-ui:    1.8;   /* Noto Naskh: prayer names, labels, chips */
  --lh-ar:       2.1;   /* Amiri: Qur'an, hadith, du'a           */

  --ls-tight:    -0.02em;
  --ls-wide:     0.07em;
  --ls-wider:    0.11em;
  --ls-widest:   0.15em;
  --ls-num:      0.04em;   /* tabular figures read in groups: account
                              numbers, sort codes, stall ids */

  --font-arabic-ui: 'Noto Naskh Arabic', 'Amiri', serif;
  --font-arabic:    'Amiri', 'Noto Naskh Arabic', serif;

  --h1: clamp(2.15rem, 4.8vw, 3.75rem);
  --h2: clamp(1.8rem,  3.3vw, 2.6rem);
  --h3: clamp(1.15rem, 1.6vw, 1.4rem);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out:  cubic-bezier(.22,.61,.36,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
  --t-fast: .18s;
  --t-med:  .32s;
  --t-slow: .6s;
  --t-reveal: .8s;   /* a section entering is slower than a control reacting */

  /* stagger: a delay ramp, not four loose values */
  --d-1: .08s;  --d-2: .16s;  --d-3: .24s;  --d-4: .32s;
}