/* The brand side's tokens for the pages drawn with the app's pieces: the signed-in brand workspace (lib/page.mjs appShell)
   and /xray, /ask, /long-runners and the agency pack (lib/page.mjs shell). They wear Parade's cream, the brand door's one
   look (research/flashstar/design-lab/system/parade.css, public/premiere.css): warm charcoal ink on cream paper, one amber
   step, the two Funnel faces, no gradients. Same token names as mobile-tokens.css, other values. */
@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/FunnelDisplay-300-800-latin.woff2) format('woff2')}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/FunnelSans-300-800-latin.woff2) format('woff2')}
html[data-app="brand"]{color-scheme:light;
 --bg:#f4eee4;--bg-deep:#ede5d8;--surface:#fffaf2;--surface-raised:#fffaf2;--surface-pressed:#ece3d4;--media-bg:#16130e;
 --ink:#16130e;--muted:#5f584c;--faint:#766f62;--line:#e2d9c9;--line-strong:#d3c8b4;
 --accent:#f5a524;--accent-hover:#ffb83d;--accent-pressed:#e8981a;--link:#16130e;--accent-tint:rgba(245,165,36,.14);--accent-ring:rgba(245,165,36,.55);
 --error:#b0361c;--error-surface:rgba(176,54,28,.08);--success:#2f6b3a;--on-accent:#16130e;
 --glass:rgba(244,238,228,.8);--glass-strong:rgba(244,238,228,.95);--scrim:rgba(22,19,14,.6);--color-backdrop:rgba(22,19,14,.4);
 --grad-surface:linear-gradient(#fffaf2,#fffaf2);--grad-raised:linear-gradient(#fffaf2,#fffaf2);--grad-accent:linear-gradient(#f5a524,#f5a524);
 --ambient:none;--noise:none;--hi:0 0 #0000;--ring:0 0 0 1px #e2d9c9;--ring-media:inset 0 0 0 1px rgba(22,19,14,.08);
 --elev-1:0 1px 2px rgba(22,19,14,.08);--elev-2:0 12px 30px -18px rgba(22,19,14,.4);--elev-3:0 24px 48px -24px rgba(22,19,14,.45);--elev-sheet:0 -1px 0 #e2d9c9,0 -24px 60px -24px rgba(22,19,14,.4);
 --btn-primary:0 14px 36px -18px rgba(22,19,14,.55);--btn-primary-press:0 4px 12px -8px rgba(22,19,14,.4);--btn-primary-hover:0 14px 30px -16px rgba(22,19,14,.55);
 --btn-secondary:inset 0 0 0 1px #d3c8b4;--glow-accent:none;
 --display:'Funnel Display',system-ui,sans-serif;--body:'Funnel Sans',system-ui,sans-serif;--mono:'Funnel Sans',system-ui,sans-serif;--hover:rgba(22,19,14,.05);--chrome:rgba(244,238,228,.94)}
html[data-app="brand"] body{font-family:'Funnel Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink)}
/* the one wordmark, "Cracked." with its amber dot (the same as public/premiere.css .pm-mark) */
html[data-app="brand"] .pm-mark{display:inline-flex;align-items:center;gap:2px;font:700 21px/1 'Funnel Display',system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
html[data-app="brand"] .pm-mark::after{content:"";width:7px;height:7px;margin-top:9px;border-radius:50%;background:#f5a524}

/* ---------- the pieces the effects studio painted by hand, redrawn for paper ----------
   Only for pages marked data-app="brand". The X-ray's film strip, trading card and broken-page browser stay dark on
   purpose: they are screens and media, so they keep the studio's ink inside them. */
html[data-app="brand"] :is(.xr-film,.xr-card,.xr-browser,.xr-stats){--ink:#f4eee4;--muted:#b4ab9b;--faint:#8e8677;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);--link:#f5b54a;--hi:inset 0 1px 0 rgba(255,255,255,.07);--ring:0 0 0 1px rgba(255,255,255,.07);color:var(--ink)}
html[data-app="brand"] body.journey-page{background:var(--bg)}
@media(max-width:47.99rem){
 html[data-app="brand"] .journey-nav::before{background:var(--chrome);box-shadow:0 1px 0 var(--line)}
 html[data-app="brand"] :is(.flow-action,.result-dock){background:var(--chrome);box-shadow:0 -1px 0 var(--line)}
 html[data-app="brand"] :is(.flow-action,.result-dock)::before{background:linear-gradient(to top,var(--bg) 0%,transparent 100%)}
}
/* Ask Cracked: a paper panel instead of the studio's dark one; chips and cards drawn with ink hairlines. */
html[data-app="brand"] .ask-lib{background:var(--surface);box-shadow:var(--ring)}
html[data-app="brand"] .ask-lib::before{display:none}
html[data-app="brand"] :is(.ask-input,.ask-input:focus){box-shadow:inset 0 0 0 1px var(--line-strong)}
html[data-app="brand"] .ask-input{background:var(--bg)}
html[data-app="brand"] .ask-input:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
html[data-app="brand"] :is(.ask-starters button,.ask-next button,.ask-cat button){background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong)}
html[data-app="brand"] :is(.ask-starters button,.ask-next button,.ask-cat button):hover{background:var(--accent-tint)}
html[data-app="brand"] :is(.ask-ad,.ask-gate,.ask-cats){background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong)}
html[data-app="brand"] .ask-ad:hover{background:var(--accent-tint)}