/* Gridwords design tokens — generated from tokens.json */
:root {
  --bg-deep:#2C1D63; --bg-mid:#5330A6; --bg-warm:#7B3FA8;
  --bg-gradient:linear-gradient(165deg,#2C1D63 0%,#5330A6 58%,#7B3FA8 100%);
  --bg-celebration:linear-gradient(165deg,#3A1F7A 0%,#5330A6 55%,#8B3F9E 100%);
  --bg-night:linear-gradient(165deg,#120E28 0%,#1D1640 60%,#2A1B52 100%);

  --panel:#FFFFFF; --panel-soft:#F4F0FD;
  --ink:#201A3C; --ink-muted:#6E668F;
  --on-dark:#FFFFFF; --on-dark-muted:#BCAEEA;

  --cell-empty:#F2EEFC; --cell-edge:#E2DAF6; --cell-mark:#BFB4E4;
  --cell-fill:linear-gradient(180deg,#FFA24D,#FF6B33);
  --cell-fill-shadow:rgba(196,74,20,0.55);

  --fill-a:#FFA24D; --fill-b:#FF6B33;
  --gold-a:#FFD75E; --gold-b:#FFA92B; --gold-shadow:#CE7C12;
  --violet:#7C5CFF; --violet-light:#9277FF; --violet-shadow:#5334C9;
  --ink-on-gold:#3B2606;
  --teal:#22D3C5; --pink:#FF6FB1; --green:#3DDC97; --flame:#FF9F43; --red:#FF5D5D;

  --glass:rgba(255,255,255,0.14); --glass-edge:rgba(255,255,255,0.22);

  --font-display:'Fredoka','Trebuchet MS',sans-serif;
  --font-ui:'Nunito','Helvetica Neue',Arial,sans-serif;

  --cell-size:38px; --cell-gap:2px; --cell-radius:8px;
  --panel-radius:24px; --panel-shadow:0 14px 34px rgba(18,8,48,0.38);
  --btn-height:54px; --btn-radius:16px; --btn-bevel:4px;
  --screen-pad-x:16px;
}
[data-theme="night"] {
  --panel:#241D46; --panel-soft:#2E2657;
  --ink:#FFFFFF; --ink-muted:#A99BD8;   /* ink.onPanelNight / ink.onPanelMutedNight */
  --cell-empty:#332A5F; --cell-edge:#3E3470; --cell-mark:#6C5FA6;
}
.btn { height:var(--btn-height); border-radius:var(--btn-radius); font-family:var(--font-display);
       font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn--gold   { background:linear-gradient(180deg,var(--gold-a),var(--gold-b));
               box-shadow:0 var(--btn-bevel) 0 var(--gold-shadow); color:var(--ink-on-gold); }
.btn--violet { background:linear-gradient(180deg,var(--violet-light),var(--violet));
               box-shadow:0 var(--btn-bevel) 0 var(--violet-shadow); color:#fff; }
.btn--ghost  { background:var(--glass); box-shadow:0 var(--btn-bevel) 0 rgba(0,0,0,0.18); color:#fff; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }