/* AVA — the house colour, and the light base.
 *
 * A REAL STYLESHEET, IN <head>, ON PURPOSE.
 *
 * This began life inside ava-wire.js as an injected <style>. That works, and it
 * flashes: the wrapper scripts load at the very bottom of the document, so the
 * export's own gold painted first and every reload showed the old theme for a
 * frame before this arrived. Appending a stylesheet after first paint also
 * reflows the page, which is what made the calendar tab jump.
 *
 * server.js links this into <head> for every route that serves the export, so
 * it is parsed with the export's own CSS and there is nothing to correct
 * afterwards. It stays a wrapper file in every other sense: the export itself
 * is never edited, and a new design export drops in without touching this.
 *
 * WHY IT IS LONG. The export themes through custom properties, so three of them
 * per mode re-point 104 var(--amber*) references at once - that part is four
 * lines. The rest is the ~30 rules where the export writes the accent as a
 * literal hex, which no variable override can reach, restated by selector.
 * Every class named here is checked to exist in the export.
 */

/* 1. the accent, both modes. This is the part that does the heavy work. */
:root {
  --amber:    #a999ea;
  --amber-bg: rgba(169,153,234,0.14);
  --amber-bd: rgba(169,153,234,0.45);
}
html.light {
  --amber:    #6d52c2;
  --amber-bg: rgba(109,82,194,0.14);
  --amber-bd: rgba(109,82,194,0.45);
}

/* 2. the light base, warmed to match. The dark base already matches the
 *    new palette exactly, so nothing dark is restated here. */
html.light {
  --bg:       #f6f4f0;
  --bg-side:  #efece6;
  --bg-card:  #ffffff;
  --bg-input: #faf9f6;
  --bg-page:  #eeebe4;
  --text:     #26282c;
  --muted:    #585d66;
  /* #7d828c measured 3.86:1 on #f6f4f0 and is the colour of 96 rules'
   * worth of secondary text - under the 4.5:1 a person actually needs.
   * Darkened until it passes; still clearly secondary next to --muted. */
  --dim:      #666b74;
  --faint:    #9a958c;
  --grey-bg:  #e2ded6;
  --grey-bd:  #c9c4ba;
}

/* 3. the hovers, which the export writes as literal gold.
 *    Dark lifts the accent, light deepens it - the same direction the
 *    amber ones went. */
.btn-primary:hover,
.dep-btn.primary:hover,
.btn-sm.go:hover        { background: #c0b3f2; color: #1c1e21; }
html.light .btn-primary:hover,
html.light .dep-btn.primary:hover,
html.light .btn-sm.go:hover { background: #583fa3; color: #ffffff; }
/* COLOUR ONLY, never the background.
 *
 * The first version of this wrote "a:hover { background: none }" to undo a
 * fill nothing had set. 'a:hover' is (0,1,1) and ".mail-btn" is (0,1,0), so
 * it won - and hovering a button in the email builder stripped the fill off
 * a filled violet pill, leaving bare text on cream. The export's own rule
 * set colour and nothing else; so does this one. */
a:hover                 { color: #c0b3f2; }
html.light a:hover      { color: #583fa3; }

/* 4. the ink ON the accent. The export hard-codes #1c1e21 in both modes,
 *    which was right for pale amber and is wrong for a dark violet: in
 *    light mode these all need white. The export already does this for
 *    five selectors on its own line 580; these are the ones it missed. */
html.light .dep-btn.primary,
html.light .btn-sm.go,
html.light .blk .dep-badge,
html.light .act-ic.money,
html.light .blk .note-badge,
html.light .blk .pay-badge.ok,
html.light .tbl-pick button.sel .tp-check { color: #ffffff; }

/* 5. the tints, written as raw rgba of the old gold. Same alphas, so the
 *    weight of every one of them is unchanged - only the hue moves. */
.strip-cell i            { background: rgba(169,153,234,0.4); }
.blk.selected .grip i    { background: rgba(169,153,234,0.85); }
.pill.amber              { background: rgba(169,153,234,0.16); }
.btn-redeem:hover        { background: rgba(169,153,234,0.12); }
.grp-chip                { border-color: rgba(169,153,234,0.3); }
.btn-warn                { border-color: rgba(169,153,234,0.4); }
.btn-warn:hover          { background: rgba(169,153,234,0.1); }
.tp-badge                { border-color: rgba(169,153,234,0.32); }
.tp-combo:hover          { background: rgba(169,153,234,0.18); }
.act-fchip button:hover  { background: rgba(169,153,234,0.22); }
.act-item.money          { background: rgba(169,153,234,0.055); }
.act-item.money:hover    { background: rgba(169,153,234,0.085); }
html.light .strip-cell i         { background: rgba(109,82,194,0.4); }
html.light .blk.selected .grip i { background: rgba(109,82,194,0.85); }
html.light .pill.amber           { background: rgba(109,82,194,0.16); }
html.light .btn-redeem:hover     { background: rgba(109,82,194,0.12); }
html.light .grp-chip             { border-color: rgba(109,82,194,0.3); }
html.light .btn-warn             { border-color: rgba(109,82,194,0.4); }
html.light .btn-warn:hover       { background: rgba(109,82,194,0.1); }
html.light .tp-badge             { border-color: rgba(109,82,194,0.32); }
html.light .tp-combo:hover       { background: rgba(109,82,194,0.18); }
html.light .act-fchip button:hover { background: rgba(109,82,194,0.22); }
html.light .act-item.money       { background: rgba(109,82,194,0.055); }
html.light .act-item.money:hover { background: rgba(109,82,194,0.085); }

/* 6. the previews of things that are NOT this screen - the email builder
 *    and the voucher. They preview mail, whose accent is the restaurant's
 *    own brandColor, and that default moves to violet in the same change.
 *    Left gold they would read as the one spot somebody forgot. */
/* ".eb-voucher .mail-btn" is (0,2,0) in the export and beat a bare
 * ".mail-btn", so the voucher's own CTA stayed gold while every other one
 * turned violet - the single most visible "you missed a spot" in the
 * product. Matched at the same weight here. */
.mail-btn,
.eb-voucher .mail-btn    { background: #6d52c2; color: #ffffff; }
.eb-coupon               { border-color: #6d52c2; }
.eb-add button.plus:hover { background: #6d52c2; color: #ffffff; }
.bk-pay                  { border-color: #6d52c2; }

/* The voucher card is dark in BOTH themes, so its kicker and its code have
 * to stay light on it - a dark violet here was 2.6:1 and the code was left
 * gold entirely. */
.voucher .vk             { color: #c0b3f2; }
.voucher .vcode          { color: #ffffff;
                           background: rgba(169,153,234,0.12);
                           border-color: rgba(169,153,234,0.55); }

/* A SECOND gold, for captions and small labels - eight rules, none of
 * them behind a variable, so the whole family survived the swap.
 * Muted violet at the same weight, not the accent: these are quiet
 * labels and turning them into the house colour would shout. */
.buy-card .kicker, .bp-cap, .pg-prev .cap, .pg-off,
.ot, .bk-cap, .eb-img, .eb-coupon-empty { color: #6f6588; }

/* The rest of the export's golds the variables never reached. */
/* The "Needs your attention" panel writes its gold as raw rgba three times
 * over, so the variable swap left the whole card gold. */
.attention               { background: rgba(169,153,234,0.08); }
.attention-head          { background: rgba(169,153,234,0.12); }
.attention-item          { border-top-color: rgba(169,153,234,0.2); }
html.light .attention      { background: rgba(109,82,194,0.08); }
html.light .attention-head { background: rgba(109,82,194,0.12); }
html.light .attention-item { border-top-color: rgba(109,82,194,0.2); }
/* ...and its count bubble is ink-on-accent, which violet inverts. */
html.light .attention-head .count { color: #ffffff; }

/* The card picker in the campaign builder: selected border and tick. */
.eb-pickcard.sel         { border-color: #6d52c2; }
.eb-pickcard .tick       { background: #6d52c2; color: #ffffff; }

/* 7. native controls. The export ALREADY ships html.light rules for both
 *    of these (index.html:157 and :579), so restating them here changed
 *    nothing - kept only as the note that they were checked, not missed. */
  

/* A SELECTED BOOKING, VISIBLE ON A PALE FLOOR.
 *
 * The export draws it as a 1px ring plus a drop shadow of rgba(0,0,0,0.4) -
 * which reads on the dark timeline it was designed for and almost disappears on
 * the light one, where a black shadow at 40% just looks like a smudge. A
 * thicker ring, a soft halo of the accent around it, and a shadow that suits a
 * light ground. The !important matches the export's own on this rule. */
html.light .blk.selected {
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 2px var(--amber),
              0 0 0 5px rgba(109,82,194,0.20),
              0 4px 14px rgba(38,40,44,0.16);
}

/* THE CALENDAR BUTTON LEADS THE DAY STRIP - laid out, not moved.
 *
 * The export renders it LAST (Today, the next three days, then the picker) and
 * a wrapper used to walk it to the front with insertBefore. That is a DOM move
 * after the strip has already painted, and renderDayTabs() rebuilds the strip
 * on every render - so the icon appeared after "Fri 4" and jumped left again on
 * every load and every day change. That was the calendar "moving".
 *
 * #dayTabs is display:flex, so `order` puts it first during layout: no move, no
 * second paint, nothing to jump. DOM order stays days-then-picker, which is
 * also the sensible reading order for a screen reader. */
#dayTabs .day-tab.cal { order: -1; }

/* THE NOTE MARKER STAYS AMBER.
 *
 * It was painted with var(--amber), so re-pointing that at violet took the note
 * flag with it - and a flag is not chrome. Its whole job is to catch the eye
 * against the app around it, which is what the gold was doing; in violet on a
 * violet-accented screen it stopped being a flag at all.
 *
 * The ink on it follows the same rule as everywhere else: amber is pale, so
 * near-black reads on it, in both themes. */
.blk .note-badge { background: #e8b53c; color: #1c1e21; }
html.light .blk .note-badge { background: #d99a1f; color: #1c1e21; }

/* THE WALK-IN BUTTON HAS A COLOUR OF ITS OWN.
 *
 * It was written with class "act-walkin", which is defined nowhere - not in
 * the export, not here. .act-btn sets `border:1px solid` with no colour, and
 * the three real variants supply it (.act-in green, .act-out blue,
 * .act-noshow red), so a fourth without one fell back to currentColor: a
 * full-strength outline next to three muted ones, and the only action button
 * in the panel with no hover.
 *
 * Amber, because a walk-in is the one action of the four that is not a
 * lifecycle step - the other three record what happened to a booking, this
 * one says there never was one. */
.act-walkin { color: var(--amber); border-color: var(--amber-bd); }
.act-walkin:hover { background: var(--amber-bg); }