/* The one palette both halves of Voxa are drawn with.
 *
 * Until 13.09 the landing and the Mini App were two different products to look at:
 * a blue gradient site in front of a cream, black-outlined app. Gleb's call — "зачем
 * нам два дизайна" — settled which way the merge goes: the app is what a visitor is
 * inside a minute later, so the app's language wins and the site adopts it.
 *
 * Values are lifted verbatim from miniapp/static/app.css, so the app renders exactly as
 * before; this file is now its only source for them. Consumers: miniapp/index.html and
 * landing/index.html, both linking it BEFORE their own stylesheet.
 *
 * Only custom properties live here. Component classes stay with their own page: the two
 * halves share a vocabulary, not a widget library, and `.button` means different things
 * in an app shell and on a marketing page.
 */
:root {
  color-scheme: light;
  --o:#FF4B12; --m:#FF2E88; --l:#C6FF3D; --y:#FFD21F; --b:#2B4BFF;
  --paper:#FFF0DC; --outer:#EFDFC2; --card:#FFFFFF; --ink:#150F14; --dim:#6B5A62;
  --on:#150F14; --onb:#FFF0DC; --dot:rgba(21,15,20,.13); --ac:var(--o); --sh:var(--ink);
  --voxa-bg:var(--paper); --voxa-text:var(--ink); --voxa-hint:var(--dim); --voxa-card:var(--card);
  --voxa-button:var(--o); --voxa-button-text:var(--on); --voxa-link:var(--ink);
  --voxa-bottom-safe:env(safe-area-inset-bottom,0px); --dock-height:170px;
  font:16px/1.38 "SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --o:#FF6033; --m:#FF4C9A; --l:#D2FF5C; --y:#FFDD4D; --b:#5C77FF;
  --paper:#14101C; --outer:#08060D; --card:#231A33; --ink:#FFF0DC; --dim:#A794B4;
  --dot:rgba(255,240,220,.10); --sh:var(--ac);
}
/* Resolve the accent at each surface, not once at :root (which makes every shadow orange). */

/* Named for what they do, so a page does not have to know the raw numbers: the app's
   card is a black outline with a hard offset shadow, never a soft blur. */
:root {
  --vx-outline: 3px;
  --vx-outline-thin: 2.5px;
  --vx-shadow-offset: 3px;
  --vx-shadow-offset-lg: 5px;
  --vx-radius-sm: 12px;
  --vx-radius: 18px;
  --vx-radius-lg: 26px;
  --vx-radius-pill: 999px;
  --vx-press: 4px;
}

/* The wordmark itself, not just its colours: VOXA with an orange X and a live dot. It is
   the one component that has to be literally the same in both halves, so it lives here
   rather than being copied into each stylesheet. `flex:1` belongs to the app's header
   layout and stays there. */
.brand-mark { font-weight:900; font-size:30px; letter-spacing:-.055em; }
.brand-mark b { color:var(--o); }
.brand-mark span { display:inline-block; width:11px; height:11px; margin-left:5px; background:var(--m); border:2.5px solid var(--ink); border-radius:50%; animation:blip 1.6s 3; }
@keyframes blip { 50% { transform:scale(1.45); } }