/**
 * sastamal — design tokens (single source of truth).
 *
 * The locked brand palette, type, radii and spacing as CSS variables.
 * Loaded on EVERY page (including the homepage) so all templates share one
 * source of truth: change a value here and it propagates everywhere.
 *
 * Brand is LOCKED: saffron / ink / near-white. Do not substitute a neon accent.
 */
:root {
  /* --- Surfaces --- */
  --bg-primary: #fbfaf7;   /* near-white page background */
  --bg-card:    #ffffff;   /* crisp white structural blocks */
  --bg-tint:    #fdf0e6;   /* soft saffron tint (badges, hover) */
  --bg-sand:    #f5f0e8;   /* warm neutral panel */
  /* Warm neutral variants. These predate the token system and differ from
     --bg-sand by 2-9/255. Kept as distinct tokens rather than snapped to the
     nearest neighbour: a refactor must not change a single pixel, and "close
     enough" is a judgement that needs a screen to make. Consolidate later,
     deliberately, with eyes on it. */
  --bg-sand2:   #f2efe8;
  --bg-sand3:   #f3efe7;
  --bg-sand4:   #f5f2ec;
  --bg-sand5:   #f0ece3;
  --bg-sand6:   #efe9df;
  --bg-cream:   #fffdf5;

  /* --- Text --- */
  --text-main:  #0a0806;   /* ink — headings & body */
  --text-body:  #40382e;   /* long-form body copy — softer than ink, darker
                              than muted. Distinct role: descriptions, prose. */
  --text-muted: #6a6050;   /* timestamps, subtext */
  --text-faint: #afa594;   /* very light meta */
  --text-faint2:#9a8f7d;   /* slightly stronger faint (shop meta) */
  --text-faint3:#b8b0a2;

  /* --- Text that sits ON a filled brand block (green/saffron button, pill,
         badge). This is NOT a surface: it stays light in dark mode, because a
         green button is green in both modes and its label must stay readable.
         Previously this role borrowed --bg-card ("white"), which would have
         flipped 41 labels to near-black on dark. --- */
  --on-brand: #ffffff;

  /* --- INVERTED SURFACES ---
     Sections deliberately painted as "the opposite of the page": the shops
     band, the primary .btn, tooltips, the About band. Their identity is
     "dark block, light text" — that is the design, not a consequence of the
     page being light.
     Using --ink/--paper for these breaks in dark mode: both flip, so the block
     inverts a SECOND time and becomes a light band on a dark page (exactly the
     "Turn a slow afternoon" bug). These two tokens do NOT flip. --- */
  --surface-invert:    #0a0806;   /* always-dark block */
  --on-surface-invert: #ffffff;   /* always-light text on it */

  /* Translucent sticky header. rgba(), so the hex refactor never saw it —
     it stayed cream on a dark page. Tokenised so it follows the mode. */
  --header-bg: rgba(251,250,247,.85);

  /* Muted text ON an inverted (always-dark) surface. Previously this role
     borrowed --border-soft3, a BORDER token, which went nearly invisible on
     dark. Secondary copy on a dark block needs its own value. */
  --on-invert-muted: #d8d0c2;
  --code-text:       #f5f0e8;   /* exact original of .sd-code — a token, not an approximation */

  /* --- ILLUSTRATION (About page shopfront row) ---
     Deliberately separate from the UI surface tokens. A picture's colours are
     relationships, not roles: the middle house is the focal point because it is
     LIGHTER than its neighbours and its roof is DARKER. Map those shapes to
     --bg-card / --surface-invert and dark mode dissolves the composition.
     Light values below are the exact originals. */
  --art-wall:       #eaf5ee;   /* outer houses */
  --art-wall-focal: #ffffff;   /* middle house — the eye lands here */
  --art-roof:       #12814A;
  --art-roof-alt:   #1a6b3c;
  --art-roof-focal: #0a0806;   /* darkest roof, crowns the focal house */
  /* Glazing. Was #ffffff, which was fine when each unit had one small door
     on a pale mint wall — but the parade has large shopfront windows AND
     upper windows now, and white-on-#eaf5ee is so close that all of it
     disappeared in light mode. Dark mode never had this problem: its
     values (near-black glass on dark green walls) were already properly
     separated, measuring 1.56:1 outer and 4.35:1 focal. A first pass at a
     pale sage only reached 1.22:1 — no real improvement — so these were
     picked by MEASURING against dark mode rather than by eye: 1.67:1 outer
     and 3.18:1 focal. A mid sage reads as GLASS rather than as a hole. */
  --art-door:       #a6c5b4;
  /* Focal glazing: clearly darker than its white wall, but a touch lighter
     than --art-door above, so the middle unit still reads as the brighter
     one overall. */
  --art-door-focal: #6d9a83;
  --art-line:       #b8c9bf;   /* was #e5e0d6 — too faint to define edges once units share walls */
  /* Signwriting on the fascia boards. Needs its own token because NO
     existing --art-* value is light in both modes: --art-wall flips to a
     dark green and --art-door to near-black (deliberately, so doorways
     read as openings). Painted cream lettering on a dark fascia is also
     what a traditional shopfront actually looks like. */
  --art-sign:       #f7f4ee;

  /* --- HIGH-CONTRAST BUTTON ---
     The primary "ink" button (.btn, "Get your shop set up"). Its job is to be
     the highest-contrast thing on screen, so unlike --surface-invert it MUST
     flip: dark block on a light page, light block on a dark page.
     Distinct from --surface-invert, which never flips because a band's identity
     is "dark block" regardless of mode. Measured: reusing surface-invert here
     gave 1.00 contrast against the band — literally invisible. --- */
  --btn-solid:       #0a0806;
  --on-btn-solid:    #ffffff;   /* labels on solid buttons were pure white */
  --btn-solid-hover: #000000;

  /* Modal scrim behind the peek sheet, and the sheet's grab handle. */
  --scrim: rgba(0,0,0,.5);
  --grab-handle: #ccc;

  /* Raised surface: modals, sheets — anything floating ABOVE the page.
     In light mode a sheet can share the page colour because the scrim darkens
     everything behind it. On dark that fails: the sheet and the page are the
     same near-black, so nothing separates them and a deeper scrim doesn't help
     (measured 1.03 -> 1.07). Elevation does. */
  --surface-raised: #fbfaf7;
  /* Sheet separation. In light mode a drop shadow does all the work and the
     edge is invisible (transparent). On dark, the shadow is black-on-black and
     contributes nothing, so a real border does the job instead. */
  --sheet-edge:   #e5e0d6;   /* = --border-color, the rail's existing light-mode top border */
  --peek-edge:    transparent;   /* the peek sheet had no border in light mode */

  /* Border of an EMPTY control (unticked checkbox). Unlike a card's border,
     this IS the control — there's nothing else to see — so it needs real
     contrast, not a hairline. Light keeps its current value (see note); dark
     lifts it to clear WCAG's 3.0 non-text threshold.
     NOTE: light mode's checkbox border measures 1.32 against its white card —
     faint by the same standard. Left as-is here because changing it is a
     visual change to the live site, not a dark-mode fix. Worth revisiting. */
  --control-border: #e5e0d6;
  --control-border-w: 1.5px;

  /* Hairline under a sticky sheet header. On cream it's a faint underline you
     barely register; on the dark raised sheet the same line closes the shape
     into a visible BOX around the heading. It should read as a heading with a
     rule under it, not a container. */
  --sheet-rule: #e5e0d6;
  --sheet-shadow: 0 -10px 40px rgba(0,0,0,.22);

  /* --- Brand colour (green — primary identity) --- */
  --color-brand:       #189554;  /* sastamal green — logo, buttons, structure */
  --color-brand-deep:  #12814A;  /* pressed/darker green */
  --color-brand-tint:  #eaf5ee;  /* pale green wash */

  /* --- Urgency accent (saffron — prices, timers, ending-soon ONLY) --- */
  --color-accent:      #e86000;  /* saffron — reserved for time/price urgency */
  --color-accent-deep: #c85000;  /* pressed/darker saffron (text on tint) */
  --color-accent-ink:  #a04600;  /* saffron text on light tint */

  /* --- Positive / scores --- */
  --color-green:      #1a6b3c;   /* high Sastameter, positive */
  --color-green2:     #1a8248;   /* mid-green (bands, secondary positives) */
  --color-green-dk:   #2f5c42;   /* deep muted green */
  --color-green-brt:  #22a85f;

  /* --- Lines --- */
  --border-color: #e5e0d6;   /* subtle card lines */

  /* --- Alert surfaces (deal page: expired / ending-soon banners). Soft
         tinted blocks in light; darkened equivalents in the dark block below.
         These are SURFACES that flip, not brand colours — kept as their own
         role so the deal template stops hardcoding light-only hex. --- */
  --alert-danger-bg:   #fce8e8;   --alert-danger-ink: #c8151e;
  --alert-warn-bg:     #fff8ed;   --alert-warn-ink:   #c85000;
  --alert-danger-border: #e3b7b1;   --alert-warn-border: #f0b892;
  --border-soft:  #d8d0c4;   /* slightly stronger rule */
  --border-soft2: #c9bfae;   /* stronger still (dividers on sand) */
  --border-soft3: #d8d0c2;
  --border-warm:  #ede7dd;   /* warm rule / cover placeholder */

  /* --- Layout tokens --- */
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-sm:   10px;

  /* --- Spacing increments --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

/* ══════════════════════════════════════════════════════════════════
 * DARK MODE
 *
 * Only the ~18 colour tokens are redefined — every template now reads
 * through them, so the whole site follows. Nothing below is a new colour
 * decision made in isolation; each value is the light-mode counterpart
 * re-derived for a dark surface.
 *
 * Two things deliberately do NOT flip:
 *   - Third-party marks (WhatsApp #25D366, Facebook #1877F2) are fixed
 *     brand assets, left literal in the templates.
 *   - The saffron urgency rule. Saffron still means time/price and
 *     nothing else; it's brightened, not repurposed.
 *
 * Why the greens change: #12814A on near-black is muddy and fails
 * contrast. Dark surfaces need a lighter, slightly desaturated green to
 * read as the same brand colour — the perceived hue stays sastamal
 * green even though the hex differs. Same reasoning for saffron.
 *
 * prefers-color-scheme only — no toggle. The OS already knows, and a
 * toggle without accounts means another localStorage promise we can't
 * keep across devices.
 * ══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
    /* --- Surfaces: warm near-black, not pure #000 (harsh, and the brand
           is warm-neutral). Cards lift OFF the page rather than sink. --- */
    --bg-primary: #191510;   /* was #fbfaf7 — page. Subtly warm (R-B spread 9,
                              up from 5): reads brown without competing with
                              saffron, which stays the warmest thing on screen. */
    --bg-card:    #241f18;   /* was #ffffff — warm structural blocks */
    --bg-tint:    #2e1d0f;   /* was #fdf0e6 — saffron tint */
    --bg-sand:    #2b2620;   /* was #f5f0e8 — warm neutral panel */

    /* --- Text: never pure white on dark; it vibrates. --- */
    --text-main:  #f2efe9;   /* was #0a0806 */
    --text-muted: #a99f8f;   /* was #6a6050 */
    --text-faint: #7d7466;   /* was #afa594 */

    /* --- Brand green, lifted for dark surfaces ---
       CAVEAT, found by measuring rather than eyeballing: #2ab568 is right for
       green TEXT and borders on dark (7.04:1), but white text ON a #2ab568
       button is only 2.66:1 — a fail. The primary button (Directions, Get
       alerts) would have been unreadable. So the filled-button green stays
       darker than the text green; they are different jobs. */
    /* --color-brand does double duty: green text/borders AND the fill of the
       primary button (Directions, Get alerts) which carries white text. Those
       pull in opposite directions — brighter helps the text, hurts the button.
       Measured across candidates, #1e8b4f is the best compromise:
         white text on it ....... 4.32
         it as text on the page . 4.33
       Both beat light mode's current white-on-#189554 (3.84), so dark mode is
       no worse than what ships today. If the button ever gets its own token,
       brand can go brighter (#2ab568 reads 7.04 as text). */
    --color-brand:       #1e8b4f;  /* was #189554 */
    --color-brand-deep:  #19703f;  /* was #12814A — pressed/hover, one step down */
    --color-brand-tint:  #14301f;  /* was #eaf5ee — pale wash becomes a dark
                                       green wash, same job */

    /* --- Saffron: urgency only, brightened for dark --- */
    --color-accent:      #ff7a1f;  /* was #e86000 */
    --color-accent-deep: #e86000;  /* was #c85000 */
    --color-accent-ink:  #ffa261;  /* was #a04600 — this is TEXT on a tint, so
                                       on dark it must go lighter, not darker */

    /* --- Positive / scores --- */
    --color-green:      #34c172;   /* was #1a6b3c */
    --color-green-brt:  #47d685;   /* was #22a85f */

    --text-body:  #ddd6cb;   /* was #40382e — long-form copy on dark */
    --text-faint2:#8d8474;   /* was #9a8f7d */
    --color-green2:   #2fb066;  /* was #1a8248 */
    --color-green-dk: #3d8f5f;  /* was #2f5c42 */
    --border-soft2:   #4d453b;  /* was #c9bfae */
    --border-soft3:   #453e35;  /* was #d8d0c2 */
    --border-warm:    #383028;  /* was #ede7dd */
    --text-faint3:    #857c6d;  /* was #b8b0a2 */
    /* Warm neutral panels all collapse to the same dark surface — the 2-9/255
       distinctions that mattered on cream are invisible on near-black. */
    --bg-sand2:   #2b2620;
    --bg-sand3:   #2b2620;
    --bg-sand4:   #2b2620;
    --bg-sand5:   #2b2620;
    --bg-sand6:   #2b2620;
    --bg-cream:   #201b15;

    /* Text on a filled brand block stays light — the block is still green. */
    --on-brand: #ffffff;

    /* Inverted surfaces do NOT flip. On a dark page an "inverted" block can't
       be darker than the page, so it lifts slightly instead — it stays a
       distinct block, just the other way round. Text stays light. */
    --surface-invert:    #3a3228;   /* re-seated: with cards now at #241f18 the
                                       old #2b2620 band = the card. Warm-forward
                                       slab instead, like the About band. */
    --on-surface-invert: #f2efe9;
    --header-bg: rgba(20,18,15,.85);
    --on-invert-muted: #b8b0a4;   /* readable secondary copy on the dark band */
    --code-text:       #ddd6cb;

    /* Illustration on dark: the RELATIONSHIP is preserved, not the values.
       Outer houses sit back in muted green; the middle house still steps
       forward as the lightest shape with the darkest roof. Same picture,
       re-lit — rather than three green blocks with a hole in the middle. */
    --art-wall:       #1c3d2a;   /* outer houses recede */
    --art-wall-focal: #96b0a2;   /* middle still the lightest house — but at
                                    8.0 vs the page, deliberately BELOW the
                                    heading's 16.3. On cream a white house is a
                                    whisper (1.04); on near-black the same white
                                    shouts louder than the headline. Decoration
                                    should not outrank the copy. */
    --art-roof:       #2ea864;
    --art-roof-alt:   #3fc47a;
    --art-roof-focal: #191510;   /* darkest roof — tracks the page colour so it
                                    reads as the deepest shape; re-seated when
                                    the page warmed from #14120f. */
    --art-door:       #14120f;   /* doorways read as openings on dark */
    --art-door-focal: #244934;   /* lifted to stay visible against the focal wall */
    --art-line:       #2b4a38;
    --art-sign:       #e8f1ea;   /* stays light: it sits on the near-black fascia */
    /* Flipped: on a dark page the loudest button is a LIGHT one. */
    --btn-solid:       #f2efe9;
    --on-btn-solid:    #14120f;
    --btn-solid-hover: #ffffff;   /* hover goes brighter on dark, not darker */

    /* A 50% black veil over a near-black page has almost nothing left to
       darken — the card behind just goes muddy instead of receding. Dark mode
       needs a deeper scrim to actually separate the sheet from the board. */
    --scrim: rgba(0,0,0,.72);
    --grab-handle: #5a5249;
    /* Lifts clearly above the #14120f page — this is what makes the sheet
       read as "in front" rather than washing the board out. */
    --surface-raised: #322b22;   /* lifted above the warmed card so sheets still
                                     read as elevated */
    --sheet-rule: transparent;   /* no rule on dark — it drew a box, not a line */
    --control-border-w: 2px;     /* a thin line reads weaker than a solid fill */
    --control-border: #a89d8b;   /* 6.42 on the card. First attempt was #7d7466
                                    (3.73) — that clears WCAG's 3.0 non-text
                                    floor and still looked absent, because the
                                    LABEL beside it sits at 14.95. A control the
                                    user has to find shouldn't be 4x fainter
                                    than its own text. 3.0 is a compliance floor,
                                    not a design target. */
    --peek-edge:    #6e6558;
    --sheet-edge:   #6e6558;   /* The sheet's top edge is what actually reads as
                                  "in front" on dark — 2.79 against the sheet
                                  fill. Light mode's own border is only 1.26 and
                                  gets away with it because the drop shadow does
                                  the separating; here the shadow is black on
                                  near-black and contributes nothing. */
    --sheet-shadow: 0 -10px 40px rgba(0,0,0,.55);

    /* --- Lines: on dark, borders are lighter than the surface --- */
    --border-color: #322d26;   /* was #e5e0d6 */

    /* Alert surfaces on dark: deep tinted blocks, light text. Verified 8.5+
       contrast text-on-bg, and the bg sits visibly above the dark page. */
    --alert-danger-bg:  #40201d;   --alert-danger-ink: #ffb4a8;   /* was #fce8e8 / #c8151e */
    --alert-warn-bg:    #3d2f14;   --alert-warn-ink:   #ffcf7a;   /* was #fff8ed / #c85000 */
    --alert-danger-border: #7a4038;   --alert-warn-border: #7a5a2e;   /* was #e3b7b1 / #f0b892 */
    --border-soft:  #423b32;   /* was #d8d0c4 */
}

  /* Images and the logo shouldn't glare against a dark page. */
:root[data-theme="dark"] img { opacity: .94; }

/* ------------------------------------------------------------------
 * Lightweight utility classes — all reference the tokens above, so any
 * new feature built with these auto-syncs with the global theme.
 * ------------------------------------------------------------------ */
.sm-card-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.sm-badge-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-weight: 700;
  font-size: 12px;
}
.sm-text-bold-large { color: var(--text-main); font-weight: 700; font-size: 20px; line-height: 1.15; }
.sm-text-muted { color: var(--text-muted); font-size: 13px; }
.sm-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1.5px solid var(--border-soft); background: var(--bg-card);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  font-weight: 700; font-size: 13px; color: var(--text-main);
}

/* ------------------------------------------------------------------
 * Theme toggle (footer). Light / Auto / Dark. The active state is driven
 * by [data-theme-choice] on <html>, which the head script sets from the
 * saved localStorage value BEFORE paint, so the right button is lit on
 * first render with no flash. Styled with tokens so it themes itself.
 * ------------------------------------------------------------------ */
.sm-theme-toggle {
  display: inline-flex; gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--bg-card);
}
.sm-theme-toggle button {
  font: inherit; font-size: 12px; font-weight: 600;
  line-height: 1;
  padding: 6px 12px;
  border: 0; background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sm-theme-toggle button:hover { color: var(--text-main); }
/* Light the button that matches the saved choice. */
:root[data-theme-choice="light"] .sm-theme-toggle button[data-theme-set="light"],
:root[data-theme-choice="dark"]  .sm-theme-toggle button[data-theme-set="dark"],
:root[data-theme-choice="auto"]  .sm-theme-toggle button[data-theme-set="auto"] {
  background: var(--surface-invert);
  color: var(--on-surface-invert);
}