/* CreekPOS brand tokens (brand.json theme.web) */
:root{--navy:#0B2E3B;--navy-2:#0B2E3B;--navy-3:#1F5A6B;--navy-soft:#EEF2F4;--gold:#12B886;--gold-2:#0B7A58;--gold-soft:#E3F7EF;--gold-ink:#0B7A58;--on-gold:#0B2E3B;--bg:#F7F9FA;--card:#FFFFFF;--ink:#0B2E3B;--muted:#5F7079;--line:#E3E8EB;--field:#C9D3D8;--ok:#0B7A58;--ok-bg:#E3F7EF;--ok-line:#9ADFC6;--bad:#C83C3C;--bad-bg:#FBECEC;--bad-line:#EFB3B3;--warn:#8A5A0B;--warn-bg:#FDF1DC;--top-bg:#FFFFFF;--top-fg:#0B2E3B;--top-muted:#5F7079;--top-line:#E3E8EB;--top-hover:#F1F4F6;--online-name:"CreekPOS";}
/* UI themes (3 Oct 2026): the quiet look of a theme that asks for it (brand.json themes[id].quiet — CreekPOS's clean
   and dark). Few colours: the surfaces, the ink, ONE accent (--gold) for the primary action and the chosen state;
   every other button neutral with a thin border; danger only for destructive actions. BrandLook appends this file to
   /assets/theme-<id>.css after the theme's tokens; app.css, sell.css and public.css stay as they are. */
.awning{display:none}
.top{box-shadow:none}
.btn{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn:hover{background:var(--navy-soft);border-color:var(--field);color:var(--ink)}
.btn.primary,.btn.gold,.btn.primary:hover,.btn.gold:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold,var(--navy-2))}
.btn.primary:hover,.btn.gold:hover{filter:brightness(.94)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--navy-soft);color:var(--ink)}
.btn.danger{background:var(--card)}
.btn.on,.tenders .btn.on,.chip.on,.tabs a.on,.wiz-steps li.now a{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.sync-steps li.now .n{background:var(--gold);color:var(--on-gold,var(--navy-2))}
.nav a.on{background:var(--gold-soft);color:var(--ink)}
.nav a.on .i{color:var(--gold-2)}
.plan-pill{background:var(--navy-soft);color:var(--ink)}
.banner.sync{background:var(--navy-soft);color:var(--ink);border-color:var(--line)}
.badge.CARD,.badge.SPLIT{background:var(--navy-soft);color:var(--ink)}
.online-pill:hover{background:var(--gold-soft)}
.prod:hover,.pick:hover,a.tile:hover{border-color:var(--gold)}
.prod .pp{color:var(--gold-2)}
.cl.on{background:var(--gold-soft);box-shadow:inset 3px 0 0 var(--gold)}
[dir=rtl] .cl.on{box-shadow:inset -3px 0 0 var(--gold)}
.pick.on,.pick-grid.tables .pick.busy.on{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.pick.on .pp{color:var(--ink)}
.pick.on .ps{color:var(--muted)}
.pick-grid.tables .pick.busy{background:var(--warn-bg);border-color:var(--warn)}
.sell-tools .tier.on{background:var(--gold-soft);border-color:var(--gold)}
.banner.info{background:var(--navy-soft);color:var(--ink);border-color:var(--line)}
/* the guests' pages (public.css): a white bar, the shop's accent for the order buttons */
.pub-top{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line)}
.pub-top .name,.pub-top .lang{color:var(--ink)}
.pub-top .lang{border-color:var(--line)}
.pub-top .cart,body.pub .btn.primary,body.pub .bar,body.pub .bar a{background:var(--gold);color:var(--on-gold,var(--navy-2))}
body.pub .chips a{background:var(--card);color:var(--ink)}
body.pub .chips a.on{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.look-pick .check{align-items:center}
.look-swatch{display:inline-block;width:54px;height:30px;border-radius:8px;border:1px solid var(--line);vertical-align:middle;margin-inline-end:6px;flex:none}.look-clean{background:linear-gradient(90deg,#FFFFFF 0 34%,#F7F9FA 34% 52%,#FFFFFF 52% 76%,#12B886 76%)}.look-classic{background:linear-gradient(90deg,#0B2E3B 0 34%,#F7F9FA 34% 52%,#FFFFFF 52% 76%,#12B886 76%)}.look-dark{background:linear-gradient(90deg,#13252D 0 34%,#0C1A20 34% 52%,#13252D 52% 76%,#12B886 76%)}