/* candy.css: the mintaka.trade skin. Load order:
candy/tokens.css (the palette: sugar sky by day, grape night by dark)
base.css (the starter components, unchanged)
candy.css (this file: how those components look in candy)
app.css (the app's own pieces)
Fonts, in :
Rules that make it read as one suite: headlines in Titan One with the
white sugar outline, every raised thing has a bottom edge (a solid
0 Npx 0 shadow, never only a blur), buttons are pills that press down,
numbers stay in Space Mono. Meaning colours (--rise/--fall) still mean
up/down only; the six candy colours are for identity and decoration. */
body{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%) fixed;min-height:100vh}
/* headline: coloured fill, white sugar outline, grape extrusion */
.puff,.ask{font-family:var(--display);font-weight:400;letter-spacing:.005em;
-webkit-text-stroke:.14em #fff;paint-order:stroke fill;color:var(--accent);
text-shadow:0 .03em 0 var(--frame-deep),0 .06em 0 var(--frame-deep),0 .09em 0 var(--frame-deep),
0 .16em .22em rgba(42,15,77,.3)}
.sub{font-weight:600}
/* top bar: sugar glass, a star that goes home to mintaka.trade */
.bar{background:color-mix(in srgb,var(--paper) 72%,transparent);border-bottom:0;
box-shadow:0 1px 0 color-mix(in srgb,var(--frame) 14%,transparent)}
.brand{font-family:var(--display);font-weight:400;letter-spacing:0;color:var(--ink);text-decoration:none}
.home{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;
background:var(--card);box-shadow:0 3px 0 var(--line)}
.home img,.home svg{width:22px;height:22px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.freshness{border:0;box-shadow:0 3px 0 var(--line)}
/* everything raised: bigger radius, a candy rim, a bottom edge */
.choice,.row,.card,.pop-body,.sheet-body{border:3px solid var(--line);
box-shadow:0 5px 0 var(--line),var(--shadow)}
.choice{border-radius:var(--radius-lg)}
.row,.card{border-radius:var(--radius)}
.choice:hover,.row:hover,.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.choice:active,.row:active,.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line),var(--shadow)}
.choice-name,.sheet-tick,.pop-body h2{font-family:var(--display);font-weight:400;letter-spacing:0}
.chip{font-weight:700;padding:3px 10px}
/* buttons: pills that press down */
.primary,.candy-btn{--c0:var(--c,var(--accent));--d0:var(--d,#A0005A);
display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
border-radius:999px;border:0;text-decoration:none;font-weight:800;font-size:16px;color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);cursor:pointer;
background:linear-gradient(180deg,var(--c0),var(--d0));
box-shadow:0 5px 0 color-mix(in srgb,var(--d0) 80%,#000),inset 0 2px 0 rgba(255,255,255,.45);
transition:transform .1s,box-shadow .1s,filter .15s}
.primary{width:100%}
.primary:hover,.candy-btn:hover{filter:brightness(1.08) saturate(1.1)}
.primary:active,.candy-btn:active{transform:translateY(4px);
box-shadow:0 1px 0 color-mix(in srgb,var(--d0) 80%,#000),inset 0 2px 0 rgba(255,255,255,.45)}
/* inputs */
input[type=text],input[type=password],input[type=email],input[type=search],select,textarea{
font:inherit;color:var(--ink);background:var(--card);border:3px solid var(--line);
border-radius:var(--radius);box-shadow:inset 0 2px 0 rgba(42,15,77,.05)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
/* the members-only page every app shares */
.gate{max-width:440px;margin:0 auto;padding:12vh var(--pad) 40px;text-align:center}
.gate .ask{font-size:clamp(40px,11vw,60px);margin:18px 0 12px}
.gate form{display:grid;gap:14px;margin-top:10px;text-align:left}
.gate input{font-size:18px;padding:15px 18px}
.gate .err{color:var(--fall);font-weight:700;font-size:15px;margin:0}
.gate .star{width:72px;height:72px;filter:drop-shadow(0 5px 0 rgba(0,0,0,.18))}
.gate .back{display:inline-block;width:auto;height:auto;margin:22px 0 0;color:var(--muted);font-weight:700;font-size:14px}