/* ==========================================================================
   PCEA theme tokens — sampled from the parish crest.
   Loaded by every page; layout CSS stays with its own page. Retheming a
   future parish means editing this file only.

   SAMPLED FROM THE LOGO
     #312D8E  the roundel blue behind the cross
     #F11B23  the burning bush
     #FFF112  the flame tips
     #FFFFFF  the cross and the FAITH / LOVE / HOPE banners

   WHERE THE SAMPLED VALUES COULD NOT BE USED AS-IS
   Contrast was measured against white before anything became a text colour:

     #312D8E  11.07:1  passes AA for body text — carries the whole interface
     #F11B23   4.27:1  fails AA for body; fills and bars only
     #C4141B   6.06:1  the bush deepened, for negative figures
     #FFF112   1.18:1  unreadable as text anywhere; fills only
     #736600   5.79:1  the flame tips darkened, for sign-off and warnings

   The crest has no green. Rather than invent one, on-target figures are
   rendered in the parish blue and shortfalls in the bush red — the two
   colours the church already reads as its own. Safaricom green is reserved
   strictly for the M-Pesa channel, so a green mark on a page always means
   "this arrived by M-Pesa" and never "this is good news".
   ========================================================================== */

:root{
  /* brand */
  --brand:        #312D8E;   /* roundel blue — headers, rules, on-target */
  --brand-plate:  #312D8E;   /* large fields of brand colour: sidebar, sign-in */
  --brand-deep:   #17163F;   /* body text */
  --brand-soft:   #5A5896;   /* secondary text, 6.42:1 */
  --brand-tint:   #E8E7F2;   /* fills, hover */
  --brand-wash:   #F3F3F8;   /* page ground */

  --flame:        #F11B23;   /* bush red — fills, bars, tags */
  --flame-text:   #C4141B;   /* negative figures */
  --flame-tint:   #FBE0E1;

  --gold:         #FFF112;   /* flame tips — fills only */
  --gold-text:    #736600;   /* sign-off stamp, warnings */

  /* surfaces */
  --paper:        #FFFFFF;
  --ground:       var(--brand-wash);
  --rule:         #C5C4DC;
  --rule-soft:    #E4E3EE;

  /* semantics — deliberately mapped onto the crest, not onto convention */
  --ink:          var(--brand-deep);
  --ink-soft:     var(--brand-soft);
  --deficit:      var(--flame-text);
  --surplus:      var(--brand);
  --brass:        var(--gold-text);

  /* Two working surfaces the tables need by name, so page CSS never has to
     hardcode a hex and can therefore follow the colour scheme. */
  --row-hover:    #F7FAFC;
  --total-row:    #F4F7FA;

  /* Attainment matrix, diverging around 100% of the monthly budget slice.
     Tints of the roundel blue above, of the burning bush below. Each pair was
     contrast-checked against its own foreground. */
  --m-p3-bg:#312D8E; --m-p3-fg:#FFFFFF;   /* 11.07:1 */
  --m-p2-bg:#8E8CC1; --m-p2-fg:#17163F;   /*  5.46:1 */
  --m-p1-bg:#D6D5E8; --m-p1-fg:#17163F;   /* 11.89:1 */
  --m-n1-bg:#FCD6D7; --m-n1-fg:#17163F;   /* 12.87:1 */
  --m-n2-bg:#F78286; --m-n2-fg:#17163F;   /*  6.94:1 */
  --m-n3-bg:#8E1218; --m-n3-fg:#FFFFFF;   /*  9.33:1 */

  /* ---- shape and elevation -------------------------------------------
     Adopted from the reference design: soft radii, large-blur shadows at low
     alpha, and cards that sit on the page rather than being fenced by a
     hairline. Applied to containers and controls, NOT to the density of the
     ledger itself — a thirteen-column financial table read across twelve
     districts is worth more tight than airy. */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  /* Squircle-leaning radii for buttons, KPI cards and the crest only — never
     the data tables, which keep the sharp, ruled-line spreadsheet aesthetic
     on purpose. True mathematical squircles need the CSS `corner-shape`
     property, which is not yet reliable on the Android WebViews this system
     targets; a softened, slightly larger radius reads as organic without
     risking a silent fallback to square corners on real devices. */
  --r-squircle-sm: 12px;
  --r-squircle-md: 18px;
  --r-squircle-lg: 26px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Cards keep a whisper of a ring for definition on a white ground, and lean
     on elevation for separation. */
  --panel-ring: rgba(49, 45, 142, .07);
  --e-1: 0 1px 2px rgba(23,22,63,.04), 0 4px 15px rgba(23,22,63,.045);
  --e-2: 0 2px 6px rgba(23,22,63,.06), 0 12px 32px rgba(23,22,63,.07);
  --e-3: 0 8px 24px rgba(23,22,63,.10), 0 24px 60px rgba(23,22,63,.10);

  /* 135° from the roundel blue, the reference's signature move — on the
     church's own colour rather than the sample's. */
  --grad-brand: linear-gradient(135deg, #312D8E 0%, #443FB0 55%, #5A55C9 100%);
  --grad-accent: linear-gradient(90deg, var(--brand) 0%, #5A55C9 100%);
  --grad-wash: linear-gradient(135deg, rgba(49,45,142,.055), rgba(49,45,142,0));

  /* channels — functional only, never used to mean good or bad */
  --mpesa:        #00A550;   /* Safaricom */
  --bank:         #3E6C9E;   /* Equity */
  --cash:         var(--gold-text);
}

/* Brand furniture shared by every page ----------------------------------- */

.crest-mark{
  width:44px;height:44px;flex:0 0 auto;object-fit:contain;
  /* The crest is a fixed asset of the church. It is never recoloured,
     stretched or cropped — the palette bends around it, not the reverse. */
}
.crest-lockup{display:flex;align-items:center;gap:13px}

/* A four-stop rule taken straight off the crest: blue roundel, bush red,
   flame tip, and the white of the cross. Used once per page, directly under
   the masthead, so the ownership reads immediately without colouring data. */
.brand-rule{
  height:3px;border:0;margin:0;
  background:linear-gradient(90deg,
    var(--brand) 0 42%, var(--flame) 42% 74%, var(--gold) 74% 88%, var(--brand) 88% 100%);
}

/* Offline notice, shown by the service worker when a page is served from
   cache. Financial figures must never look live when they are not. */
.offline-bar{
  display:none;background:var(--gold);color:var(--brand-deep);
  padding:7px 20px;font-size:12.5px;font-weight:500;
  border-bottom:1px solid var(--gold-text);
}
body.is-offline .offline-bar{display:block}

/* ===========================================================================
   The liturgical accent layer.
   
   The church year the congregation is already living, shown quietly in the
   interface. One hue family shifts; nothing else. The rules that keep this
   from becoming a gimmick:
   
     - It NEVER touches semantic colour. Behind stays red, ahead stays green,
       in every season, because a variance that changed colour in Advent would
       be a lie told beautifully.
     - It NEVER touches figures, layout or information — only the accent
       hairline, the season caption and the KPI accent.
     - Lent dials motion DOWN rather than changing hue alone: restraint is the
       season's character, and a system that flourishes through Lent has not
       understood what it is decorating.
   =========================================================================== */
[data-season="advent"]     { --season-accent:#4c3a86; --season-wash:#efeafb }
[data-season="christmas"]  { --season-accent:#9a7b1f; --season-wash:#fdf6e3 }
[data-season="lent"]       { --season-accent:#5b4a72; --season-wash:#f1eef6 }
[data-season="easter"],
[data-season="eastertide"] { --season-accent:#a8871c; --season-wash:#fefaec }
[data-season="pentecost"]  { --season-accent:#b23b23; --season-wash:#fdeeea }
[data-season="harvest"]    { --season-accent:#8a6b16; --season-wash:#fdf5e0 }
[data-season="ordinary"]   { --season-accent:var(--brand); --season-wash:var(--brand-wash) }

/* Dark theme: the same seasons, lifted for contrast on a dark ground. */
[data-theme="dark"][data-season="advent"]     { --season-accent:#9c8ade; --season-wash:#241d3a }
[data-theme="dark"][data-season="christmas"]  { --season-accent:#e0bd57; --season-wash:#332a12 }
[data-theme="dark"][data-season="lent"]       { --season-accent:#a293c2; --season-wash:#282234 }
[data-theme="dark"][data-season="easter"],
[data-theme="dark"][data-season="eastertide"] { --season-accent:#e3c45f; --season-wash:#332c12 }
[data-theme="dark"][data-season="pentecost"]  { --season-accent:#e87a5f; --season-wash:#3a221c }
[data-theme="dark"][data-season="harvest"]    { --season-accent:#dcb84e; --season-wash:#332a10 }
[data-theme="dark"][data-season="ordinary"]   { --season-accent:var(--brand); --season-wash:var(--brand-wash) }

/* Where the season is allowed to show. */
.season-rule{height:2px;background:var(--season-accent, var(--brand));opacity:.85;
  border:0;margin:0}
.season-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--season-wash, var(--brand-wash));color:var(--season-accent, var(--brand));
  font-weight:600;letter-spacing:.01em}
.season-chip::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--season-accent, var(--brand))}

/* Lent: the same information, less movement. */
[data-season="lent"] .kpi{animation:none}
[data-season="lent"] .feed li{animation:none}