/* IconikGrid design tokens. Change a colour or a timing here and the whole site follows.
   Colours that need transparency also have an -rgb twin: use rgba(var(--v-rgb), .3). */
:root{
  /* surfaces */
  --bg:#111014;--bg2:#1D1A24;--card:#292433;--bd:#393341;
  --bg-rgb:17,16,20;
  /* text */
  --tx:#F5F3FF;--tx2:#A1A1AA;
  /* brand: electric violet */
  --v:#8B5CF6;--v2:#A78BFA;
  --v-rgb:139,92,246;--v2-rgb:167,139,250;
  /* feedback */
  --bad:#FB7185;--bad-rgb:251,113,133;
  /* learning results (one place, so every page shows them the same way) */
  --res-ind:var(--v);--res-ast:rgba(var(--v-rgb),.45);--res-self:rgba(var(--v2-rgb),.14);--res-need:var(--tx2);
  /* glow and depth */
  --glow-ring:0 0 0 4px rgba(var(--v-rgb),.25);
  --glow-lift:0 10px 30px -10px rgba(var(--v-rgb),.7);
  --glow-soft:0 0 40px -8px rgba(var(--v-rgb),.55);
  --shadow-deep:0 30px 70px -20px #000;
  /* shape */
  --r-sm:12px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-pill:999px;
  /* fonts */
  --hf:"Space Grotesk","Segoe UI",system-ui,sans-serif;--bf:Inter,"Segoe UI",system-ui,sans-serif;
  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-fast:.2s;--dur:.35s;--dur-slow:.8s;
  --stagger:70ms;
}