/* asuko-brand.css — the tokens DESIGN.md allows. Change values here, meanings there.
   From asuko-dance/docs/design/website-2026-09/SITE-SPEC.md §1 (29.09.2026). The old
   names (--stage, --ink, --neon, the glow) are gone with the old look: a page that
   still says var(--neon) should fail loudly, not quietly pick up a new colour. */
:root{
  --ground:#0a0a0f;                  /* page */
  --raised:#14141c;                  /* cards, inputs, demo windows */
  --raised-2:#1c1c27;                /* hover */
  --pearl:#f4f1ea;                   /* text */
  --muted:#a9a49b;                   /* secondary text; AA on --ground, never under 13px on --raised */
  --line:rgba(244,241,234,.12);      /* section rules */
  --line-2:rgba(244,241,234,.24);    /* outlined buttons, input border */
  --pink:#ff2d8a;                    /* the waitlist button and the full stop, nothing else, one per view */
  --blue:#2f7bff;                    /* her streak: small marks only; the page does not use it today */
  --seaglass:#7fd8c0;                /* "listening" inside the app's stage card */
  --live:#d2ec50;                    /* the live dot, "joined", the fan's Listening, a permission that is on.
                                        From the 29.09.2026 boards (SiteHome, SiteMobile); SITE-SPEC §1
                                        does not list it yet. */
  --radius:14px;                     /* images, panels */
  --pill:999px;                      /* buttons, inputs */

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
/* One dark stage, no light theme (W1). */
html{color-scheme:dark;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--pearl);font:400 16px/1.55 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* Display type is Archivo 800 with tight tracking; the logo itself is never set in
   type — it is the outlined SVG from the logo kit. */
.display{font-family:var(--display);font-weight:800;letter-spacing:-.045em;word-spacing:.12em;margin:0}
/* word-spacing: the logo's −0.045em tracking also closes the gap between words, so at display
   sizes "for your" read as one word (Sergei, 29.09.2026). The tracking stays; the words part. */
/* Every h2 ends in this. It is the same element as the logo's stop. The boards of
   29.09.2026 put it on every h2, "Get on her list." included, and make it beat. */
.stop{color:var(--pink)}
.label{font-size:13px;color:var(--muted)}

/* Buttons. Primary is the waitlist and only the waitlist. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:var(--pill);
  font:inherit;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-primary{height:52px;padding:0 24px;border:0;background:var(--pink);color:var(--ground);font-size:15px;font-weight:700;
  box-shadow:0 6px 18px -6px rgba(255,45,138,.55);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,letter-spacing .2s}
.btn-primary:hover:not(:disabled){transform:scale(.965);letter-spacing:-.01em;box-shadow:0 0 0 6px rgba(255,45,138,.16),0 12px 32px -8px rgba(255,45,138,.85)}
.btn-primary:active:not(:disabled){transform:scale(1.05);transition-duration:.08s}
.btn-primary:disabled{cursor:progress;opacity:.8}
/* Secondary: pearl fills it from the left under the pointer (the boards' "line button"). */
.btn-secondary{height:40px;padding:0 18px;border:1px solid var(--line-2);color:var(--pearl);font-size:14px;font-weight:600;
  background:linear-gradient(var(--pearl),var(--pearl)) no-repeat 0 0/0% 100%;transition:background-size .28s cubic-bezier(.2,.8,.2,1),color .28s}
.btn-secondary:hover:not(:disabled){background-size:100% 100%;color:var(--ground)}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed}
/* Focus on everything interactive: a 2px pearl outline, 2px off. Never removed. */
:focus-visible{outline:2px solid var(--pearl);outline-offset:2px}

.dot{display:inline-block;width:7px;height:7px;border-radius:var(--pill);background:var(--live);flex-shrink:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.btn-primary,.btn-secondary{transition:none}}