/* ══════════════════════════════════════════════════════════════════════
   SACRED PLACE THEME LAYER: every --wa-* override, and the --sp-* brand
   tokens, in one file. Loaded by BOTH layouts (base.njk and kiosk.njk),
   immediately after the Web Awesome kit stylesheets and before anything
   else of ours, so a theme change is made here once.

   Per the webawesome-design skill: "Each decision belongs in exactly one
   of them. If the brand color is set in three places, it is effectively
   set in none." Until 2026-10-11 this block was the top of main.css, and
   kiosk.njk carried its own partial copy (palette and fonts, but stock
   success/warning greens and no fill-loud pairs).

   ⚠ TOKENS ONLY. No element styling (body, headings, links) belongs here;
   that is page CSS and lives in main.css, which kiosk pages do not load.

   ⚠ LOAD ORDER IS PART OF THE CONTRACT. This file must come before
   main.css in base.njk: main.css used to start with these rules, so every
   rule in it won ties against them, and linking this first keeps that.
   The two class-scoped competitors (.sp-blue-variant's danger remap and
   .sp-drawer-form__inner's placeholder color) win on specificity anyway.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* Sacred Place brand tokens.
     The four core brand hues are single-sourced from the Web Awesome
     palette scales defined below (the -50 step of each role is an exact
     hex match), so re-theming the WA scale cascades to every --sp-*
     usage. Custom properties resolve lazily, so referencing a token
     defined later in this same :root block is fine.
     Magenta → brand, Light Blue → info, Green → success, Orange →
     warning.

     ⚠ THE ORANGE IS warning-50, THE SAME STEP GREEN GETS IN success. An
     earlier pass moved the color at this slot to 80 on the reasoning that
     the chroma peak should follow the anchor's true lightness, so the
     ramp would keep an even ladder like brand and danger.

     That reasoning was sound about ramps and wrong about what a ramp is
     FOR. `--wa-color-warning-on-quiet` and the other semantic hooks
     resolve to mid steps, so moving it up left every one of them pointing
     at a washed-out tint. The Hub's TOOLS nav section went brown while
     FINANCES stayed green — because green was still at success-50 and
     this one was not.

     A semantic family's identity lives at 50. Match green.

     ⚠ THE 2026-08-02 REVISION: GOLD BECAME ORANGE, AND IT WAS NOT A
     TASTE CALL. PANTONE 3514C #F6B800 was replaced by PANTONE 1585C
     #FF6A13 across the app, the Hub and this site in one change. Three
     measured reasons, in the order they matter:

     1. THE GOLD FAILED AA AS SEMANTIC TEXT. `warning-on-quiet` resolved
        to #cc9700, which is 2.63:1 on white, against 5.30:1 for the
        green equivalent sitting beside it. Not tunable: a yellow bright
        enough to read as gold is too light to be text on white. The
        orange's equivalent step is #BF5700 at 4.59:1.
     2. GOLD WAS THE ONLY BRAND COLOR NEEDING BLACK INK, by this site's
        own `chipTextColor()` rule in .eleventy.js — y=182 against a 160
        threshold, where the other four sit between 52 and 114. The
        orange is 143, so it takes white like the rest and the exception
        goes away.
     3. ITS LIGHTNESS FOUGHT THE RAMP. At L=0.817 the gold does not sit
        at 50, which is the whole subject of the paragraph above.

     ⚠ THE SAME DAY, 1585C WAS REPLACED BY TWO ANCHORS: 158C #E87722 AT
     STEP 50 AND 159C #BF5700 AT STEP 40. 1585C was too bright and stole
     the show, and the fix is not one duller orange.

     WHY TWO. A ramp normally has one fixed point, which forces a single
     color to be both the identity and the working ink. Those are
     different jobs: step 50 is what reads as "the brand color", step 40
     is what `on-quiet` sets text in and what the dark scheme's loud fill
     draws from. 158C is bright enough to be an identity without shouting;
     159C is dark enough to be read as type. They sit 0.110 apart in OKLCH
     lightness — brand's own 50->40 gap is 0.088 — and 2.2 degrees apart
     in hue, so this is one ramp with two real colors on it.

     ⚠ AND 159C IS THE LONGHORN BURNT ORANGE, which is the reason it is in
     the palette at all — as the church office is the reason 1585C was.
     Both are reasons about people, not contrast, and both belong on the
     record so a later pass does not "restore" one from a measurement.

     ⚠ AND #BF5700 IS A SCREEN VALUE, NOT WHAT PMS 159 CONVERTS TO.
     Those are two different questions and the paragraph above answers
     only the first: Longhorn is why this color is in the palette at
     all, and reading better on a screen is why the hex is THIS hex.

     A spot ink has no single sRGB, so the table you convert through
     decides the answer. The common conversion is #CB6015, which is
     lighter; #BF5700 is UT Austin's published conversion, which is
     where the value was found rather than why it was kept. Neither
     table is wrong. The question is what reads, and a screen is the
     only place this site is ever seen — the ink is the reference,
     not the authority.

     ⚠ DO NOT "CORRECT" IT TO #CB6015. Reported as drift on
     2026-09-17 by somebody checking the hex against Pantone, which is
     the correct thing to do and will happen again. Contrast agrees
     with the eye, which is what makes this non-negotiable rather than
     a preference: white on #BF5700 is 4.59:1 where #CB6015 is 4.02:1
     and misses AA for normal text — on the very step every
     `on-quiet` label and the dark scheme's loud fill draw from.

     The ramp still runs about a step light of its siblings (158C is
     L=0.687 against brand's 0.565), so the `fill-loud` compensation lower
     down is still needed. An anchor at L~0.58 would delete it — 159C
     alone at step 50 was measured and does — and was rejected because it
     drops dE against danger-50 to 0.089, where these notes record 0.222
     as the closest pair among the five brand colors. Two anchors hold it
     at 0.178, level with 1585C's 0.184.

     ⚠ PRINT DISAGREES UNTIL IT IS REISSUED. Anything already printed
     carries 3514C; 1585C was never printed. That is a known, accepted
     cost and not a drift to be "corrected" back. */
  /* Dimension scales from the supplied theme. */
  --wa-border-radius-scale: 1.5;
  --wa-border-width-scale: 2;
  --wa-space-scale: 1;

  /* ⚠ THE SECOND ANCHOR — the Longhorn burnt orange, pinned at step 40
     rather than 50 because 40 is where `on-quiet` text and the dark
     scheme's loud fill are drawn from. */
  /* ── RETIRED 2026-10-11: THE --sp-* ALIASES OF EXISTING TOKENS ─────────
     The webawesome-design skill: "A new name for an existing token is not
     [fine]." Eight names only re-labelled a token that already existed, and
     every call site now references the real one directly:
       --sp-magenta  -> --wa-color-brand-50      --sp-green      -> --wa-color-success-50
       --sp-orange   -> --wa-color-warning-50    --sp-light-blue -> --sp-blue-50
       --sp-gold     -> --wa-color-warning-50    --sp-dark-blue  -> --sp-navy-30
       --sp-burnt    -> --wa-color-warning-40    --sp-dark-grey  -> --sp-ink
     Do not bring an alias back. What stays as --sp-* is what Web Awesome has
     no word for: the brand blue and navy ramps, the body ink, light grey. */

  /* ⚠ THE TWO BLUES GET FULL RAMPS. Every other brand color has a WA
     semantic family behind it — magenta/brand, green/success,
     gold/warning — so it comes with eleven steps. The blues had one
     value each, usable for a fill and nothing else: no border, no hover,
     no quiet tint, no text on a dark surface.

     `info` still holds the light blue for WA's own semantic use. These
     are the same color as a FAMILY, for everything that is not "this is
     informational".

     Generated like the others: constant hue, the same lightness ladder,
     gamut-clipped, anchor pinned to its Pantone hex at the step its own
     lightness lands on — blue 50, navy 30.

     ⚠ AND THE ANCHOR IS THE BRAND SHEET'S #0072DA, NOT #0072CE.
     Both hexes are offered for PANTONE 285C and the sheet prints the
     first, so the sheet wins: a hex on a brand sheet is a DECISION,
     where a hex from a converter is a guess about that decision. It
     was moved to #0072CE on 2026-09-17 and restored the same day.
     Contrast broke no tie and could not — 4.75:1 against 4.89:1,
     both clear of AA.

     ⚠ AND THE OTHER TEN STEPS WERE GENERATED FROM #0072DA, so
     moving the anchor alone leaves it sitting off its own curve. So
     do this site's own derived literals: `rgba(0, 114, 218, ...)` IS
     #0072DA, in main.css, identity.njk, kids.njk, tag-checkin.njk and
     brunch-rsvp.njk. A correction that moves the token and leaves
     every literal drawn from the same source untouched is the tell
     for a value that was never drift — and a reason to be slow
     about moving an anchor at all. `--wa-color-info-50` carries the
     same hex and moves with it; navy 30 is the sheet's #1A3673 on the
     same footing. */
  --sp-blue-05: #010f24;
  --sp-blue-10: #011936;
  --sp-blue-20: #012d5d;
  --sp-blue-30: #034485;
  --sp-blue-40: #055baf;
  --sp-blue-50: #0072DA;   /* PANTONE */
  --sp-blue-60: #3c90f3;
  --sp-blue-70: #6cadfd;
  --sp-blue-80: #a0c9fe;
  --sp-blue-90: #d3e4f9;
  --sp-blue-95: #eaf1fa;
  --sp-navy-05: #000934;
  --sp-navy-10: #011149;
  --sp-navy-20: #0f2965;
  --sp-navy-30: #1A3673;   /* PANTONE */
  --sp-navy-40: #3c5b99;
  --sp-navy-50: #5775b1;
  --sp-navy-60: #738fc8;
  --sp-navy-70: #90aadd;
  --sp-navy-80: #afc7f3;
  --sp-navy-90: #d8e2f7;
  --sp-navy-95: #ebf1fb;
  /* ── THE BODY INK IS BLACK. NO GREY TEXT IS A SITE RULE. ────────
     This was #2D2927 — a warm near-black that reads as grey against
     real black, and it is what every page's body copy, every card and
     the whole footer inherit. One token decides it for all of them. (--sp-dark-grey, its old alias, was retired on 2026-10-11.) */
  --sp-ink:           #000;
  /* ⚠ THE BRAND SHEET SAYS BLACK C #2D2927, AND THIS SITE
     DELIBERATELY DOES NOT SET BODY COPY IN IT. That is the rule
     above, not drift — so the sheet and this file disagree here on
     purpose, and the disagreement is the decision rather than a thing
     to reconcile.

     #2D2927 is still correct as the church's black and correct to
     reach for as a fill; moving the BODY INK back to it is a design
     decision somebody makes deliberately, never a palette correction.
     (It was briefly moved to #2D2926 by a converter pass on
     2026-09-17 and restored: the sheet prints #2D2927.)

     The two `var(--sp-ink, #2D2927)` fallbacks in main.css are
     dead — the token is always defined — and are the last place
     the old ink is named. */
  /* Placeholder ink is set through WA's own hook and scale, not a
     local alias: neutral-40 measures 7.1:1 on white and neutral-80
     measures 4.7:1 on our darkest navy fill. WA's built-in default sits
     at 4.4:1 — just under AA — which is the whole reason both are set. */
  /* ⚠ COOL GRAY 1 C HAS TO READ COOL. #D9DAE4 is the brand
     sheet's and sits at hue 281° in OKLCH — the blue side of
     neutral, which is what the family name exists to say. A converter
     gives #D9D9D6, at hue 106°, the yellow side. That value was
     installed on 2026-09-17 and restored the same day; the commit
     that moved it said so out loud while doing it ("Cool Gray 1 C is
     warm-neutral"), which is the shape of an argument refuting
     itself.

     ⚠ AND main.css:292 CARRIES THE SAME HEX AS A LITERAL
     (`.sp-section--grey`). Move one without the other and the site
     renders two greys that are meant to be one. */
  --sp-light-grey:    #D9DAE4;

  /* Web Awesome semantic color scales mapped to the Sacred Place palette.
     Per the WA color spec (docs/webawesome/references/tokens/color.md)
     tints run 05 (near black) → 95 (near white) with 50 as the core.
     Brand → Magenta, Info → Light Blue, Success → Green, Warning → Gold. */

  /* Brand — Magenta #C43776 */
  --wa-color-brand-05: #24000f;
  --wa-color-brand-10: #350019;
  --wa-color-brand-20: #59002e;
  --wa-color-brand-30: #800045;
  --wa-color-brand-40: #a4185d;
  --wa-color-brand-50: #C43776;
  --wa-color-brand-60: #e05890;
  --wa-color-brand-70: #f57daa;
  --wa-color-brand-80: #fea9c6;
  --wa-color-brand-90: #ffd5e2;
  --wa-color-brand-95: #ffeaf0;

  /* Info — Light Blue #0072DA */
  --wa-color-info-05: #001a3e;
  --wa-color-info-10: #002d5e;
  --wa-color-info-20: #003872;
  --wa-color-info-30: #004890;
  --wa-color-info-40: #005cb4;
  --wa-color-info-50: #0072DA;
  --wa-color-info-60: #3ea0ff;
  --wa-color-info-70: #7cc1ff;
  --wa-color-info-80: #b1ddff;
  --wa-color-info-90: #dceeff;
  --wa-color-info-95: #f0f7ff;

  /* Success — Green #3F9A2A */
  --wa-color-success-05: #071306;
  --wa-color-success-10: #0d1e0a;
  --wa-color-success-20: #16370f;
  --wa-color-success-30: #1c530f;
  --wa-color-success-40: #226f0d;
  --wa-color-success-50: #3F9A2A;
  --wa-color-success-60: #4fa73c;
  --wa-color-success-70: #74c164;
  --wa-color-success-80: #9ed892;
  --wa-color-success-90: #d4e9cf;
  --wa-color-success-95: #eaf4e8;

  /* Warning — TWO ANCHORS: 158C #E87722 at 50, 159C #BF5700 at 40.
     Generating from either alone moves the other; both are brand colors. */
  --wa-color-warning-05: #1b0a03;
  --wa-color-warning-10: #2d1406;
  --wa-color-warning-20: #5a2909;
  --wa-color-warning-30: #894110;
  --wa-color-warning-40: #BF5700;
  --wa-color-warning-50: #E87722;
  --wa-color-warning-60: #ed945d;
  --wa-color-warning-70: #f1af88;
  --wa-color-warning-80: #f5c8af;
  --wa-color-warning-90: #fae1d3;
  --wa-color-warning-95: #fcede5;

  /* Danger — Red #c0261f.

     ⚠ THIS READ "Danger → Light Blue #0072DA" UNTIL 2026-09-17,
     AND IT WAS TRUE WHEN IT WAS WRITTEN. c1aa2e2 (2026-05-14) mapped
     the five brand colors one-to-one onto WA's five semantic slots,
     and the light blue really did land in `danger` — not as a
     decision about meaning, but because it was one of the two colors
     left over.

     3f28079 (2026-08-02) undid exactly that: every destructive
     confirmation on the site had been BLUE, and the same hex was
     sitting in `danger` and `info`, two slots that mean opposite
     things. It re-anchored this ramp on red and left the label alone
     — so for six weeks the last surviving trace of the mapping was a
     comment asserting the very thing that change existed to stop
     being true. A stale label is not a typo; it is a change that
     moved eleven values and none of the prose about them.

     ⚠ AND THIS IS THE ONLY FAMILY HERE THAT IS NOT A BRAND COLOR.
     The church's palette has no red, and `variant="danger"` has to
     resolve to something, so this ramp is generated rather than
     anchored to an ink. That is why #c0261f is lowercase: every
     uppercase hex on a declaration line in this block is a Pantone
     anchor, with no exceptions left — the retired --sp-antique-white was
     the last one and went with the dead Gutenberg palette on 2026-09-17.
     Do not go looking for the swatch, and do not "restore" a brand color
     here.

     kiosk.njk carries the same ramp and the same note. */
  --wa-color-danger-05: #260000;
  --wa-color-danger-10: #360001;
  --wa-color-danger-20: #570102;
  --wa-color-danger-30: #7b0003;
  --wa-color-danger-40: #a10206;
  --wa-color-danger-50: #c0261f;
  --wa-color-danger-60: #de4f42;
  --wa-color-danger-70: #f37a6c;
  --wa-color-danger-80: #fda89c;
  --wa-color-danger-90: #f6d8d4;
  --wa-color-danger-95: #fdebe9;

  /* Fonts */
  --wa-font-family-body:     "League Spartan", sans-serif;
  --wa-font-family-heading:  "League Spartan", sans-serif;
  --wa-font-family-longform: "League Spartan", sans-serif;

  /* Placeholder ink, set once for every wa-input/textarea/select on the
     site rather than per form. WA's own default measures 4.4:1 — just
     under AA — so both surfaces get a measured replacement instead. */
}
/* Placeholder ink, set once for every control on the site. WA's own
   default measures 4.4:1 — just under AA — so both contexts get a
   measured token instead: neutral-40 is 7.1:1 on white, neutral-80 is
   4.7:1 on our darkest navy fill.

   These selectors target the CONTROL, not an ancestor, on purpose. The
   component sets this property in its own :host block, which outranks a
   value merely inherited from a parent — setting it on .wa-dark alone
   silently does nothing. */
wa-input, wa-textarea, wa-select {
  --wa-form-control-placeholder-color: var(--wa-color-neutral-40);
}
.wa-dark wa-input,    .wa-invert wa-input,
.wa-dark wa-textarea, .wa-invert wa-textarea,
.wa-dark wa-select,   .wa-invert wa-select {
  --wa-form-control-placeholder-color: var(--wa-color-neutral-80);
}
/* WA default.css redefines fonts on .wa-dark / .wa-invert — keep League Spartan there too. */
.wa-dark,
.wa-invert {
  --wa-font-family-body:    "League Spartan", sans-serif;
  --wa-font-family-heading: "League Spartan", sans-serif;
}
/* ⚠ "LOUD" MEANS THE BRAND COLOR HERE, WHICH IS NOT WHAT THE THEME
   DOES. The `awesome` theme draws every `fill-loud` from a TINT in light
   mode — brand 70, danger 70, success 80, warning 80, neutral 80, with
   black ink — and only drops to step 50 in dark. That is a real design
   language, not a bug, and it is why every accent surface read as a
   pastel. (The `default` theme uses 50 + white in both schemes; this
   restores that half of it while keeping the awesome theme otherwise.)

   Matthew's call: an accent should be the church's color.

   ⚠ ONE UNSCOPED BLOCK, NO .wa-dark COUNTERPART, AND THAT IS THE POINT.
   A brand color does not change between light and dark; only the theme's
   step CHOICES flip. Setting it once means a magenta button is #C43776
   in the page and inside the connect drawer alike — which matters more
   here than in the other two repos, because this site is light-only with
   dark ISLANDS and a scheme-split rule would have had to be aimed at
   .wa-dark/.wa-invert rather than :root.wa-dark. Now there is nothing to
   aim.

   ⚠ TWO FAMILIES ARE NOT AT STEP 50, AND BOTH ARE MEASUREMENTS:

   1. WARNING COMES FROM STEP 40. White on 158C #E87722 is 2.96:1 and
      fails; white on 159C #BF5700 — which IS warning-40 — is 4.59:1.
      This is why the ramp has two anchors and why the burnt orange was
      pinned at 40: step 40 is where the working jobs are.
   2. SUCCESS TAKES WHITE INK, WHICH IS MATTHEW'S CALL AGAINST THE
      RATIO, MADE WITH THE RATIO IN FRONT OF HIM. White on #3F9A2A is
      3.58:1; black is 5.87:1. This site's own `chipTextColor()` rule
      (y=114, under 160) says white and so does he — the green reads as
      the brand green with white on it, and black on green reads as a
      different thing entirely.

      WHERE 3.58 IS FINE: anything with no text on it needs 3:1 for
      non-text contrast and clears it, and so does large text (18.66px
      bold or 24px plain). WHERE IT IS NOT: a small badge label. A known,
      accepted shortfall on the success family only, recorded so nobody
      "discovers" it later and flips it back believing it was an
      oversight. If a specific green badge ever needs to pass, darken
      THAT fill rather than re-inking all of them.

   ⚠ DO NOT "TIDY" THIS INTO FIVE IDENTICAL LINES AT STEP 50 WITH WHITE
   INK. Two of the five would fail AA, and the failure is a button label
   nobody can read rather than anything that looks wrong in a screenshot.

   neutral-50 resolves through WA's own alias chain to gray-50 #717584
   (styles/color/variants/neutral.css, reached from the palette by
   @import) — this site defines no neutral steps of its own. */
:root {
  --wa-color-brand-fill-loud:   var(--wa-color-brand-50);
  --wa-color-brand-on-loud:     #fff;
  --wa-color-danger-fill-loud:  var(--wa-color-danger-50);
  --wa-color-danger-on-loud:    #fff;
  --wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
  --wa-color-neutral-on-loud:   #fff;
  --wa-color-warning-fill-loud: var(--wa-color-warning-40);
  --wa-color-warning-on-loud:   #fff;
  --wa-color-success-fill-loud: var(--wa-color-success-50);
  --wa-color-success-on-loud:   #fff;
}

/* ── House recipe: glass form fields on a dark island ─────────────────────
   Opt in with class="sp-glass-fields" on a .wa-dark container (the Connect
   drawer, the /tag/ and /tag/checkin/ kiosk cards). Controls there use
   appearance="filled-outlined", which paints its fill from
   --wa-color-neutral-fill-quiet and its border from
   --wa-form-control-border-color; this recipe sets only those two, from
   the dark island's own text color, so the fields follow the theme. Radius,
   height and type are Web Awesome's, as on every other input on the site. Focus is Web Awesome's own ring (--wa-color-focus). Tokens only:
   it replaced four hand-painted ::part() copies on 2026-10-11. */
.sp-glass-fields :is(wa-input, wa-textarea, wa-select) {
  --wa-color-neutral-fill-quiet: color-mix(in srgb, var(--wa-color-text-normal) 8%, transparent);
  --wa-form-control-border-color: color-mix(in srgb, var(--wa-color-text-normal) 15%, transparent);
}