/* Masy Beats · tokens shared by index.html, admin.html and license.html.
   Change a value here and it updates on all three pages. */
:root{
  /* surfaces: warm black in 4 levels */
  --bg:#0c0b0a;
  --s1:#141311;
  --s2:#1b1a17;
  --s3:#24221f;
  --line:#2a2825;
  --line-2:#3a3733;
  /* text */
  --fg:#f4f2ee;
  --fg-2:#c9c5bd;
  --muted:#9a958c; /* 6.6:1 on --bg */
  /* accent: only what plays and what you buy */
  --accent:#e6a447;
  --accent-hi:#f0b865;
  --accent-ink:#1a1205;
  --accent-soft:color-mix(in oklab,var(--accent) 12%,transparent);
  --accent-line:color-mix(in oklab,var(--accent) 50%,transparent);
  --ok:#8fd1a8;
  --err:#ef8a7a;
  --scrim:rgb(8 7 6 / .64);

  /* typography */
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --w-display:650;
  --ls-display:-.04em;
  --lh-display:1;
  --t-hero:clamp(40px,5.4vw,76px);
  --t-h1:clamp(40px,6vw,80px);
  --t-h2:clamp(28px,3.4vw,44px);
  --t-h3:clamp(22px,2.4vw,30px);
  --t-h4:20px;
  --t-lead:17px;
  --t-body:15px;
  --t-sm:13px;
  --t-xs:11px;

  /* radii: bubble */
  --r-pill:999px;
  --r-xl:32px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --r-xs:8px;

  /* spacing (base 4) */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:72px;
  --sp-9:112px;
  --gutter:20px;
  --tap:44px; /* minimum touch target size */

  /* tinted shadows */
  --sh-1:0 1px 0 rgb(255 255 255 / .04) inset,0 18px 40px -24px rgb(0 0 0 / .8);
  --sh-2:0 1px 0 rgb(255 255 255 / .06) inset,0 30px 70px -30px rgb(0 0 0 / .9);
  --sh-3:0 40px 90px -30px rgb(0 0 0 / .92);

  /* motion: only transform and opacity; exits always faster than entrances */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --d-press:140ms;
  --d-fast:180ms;
  --d-base:240ms;
  --d-page:280ms;
  --d-panel:380ms;
  --d-exit:160ms;
  --d-slow:500ms;

  color-scheme:dark;
}
@media (max-width:600px){:root{--gutter:16px}}
::selection{background:color-mix(in oklab,var(--accent) 35%,transparent);color:var(--fg)}