:root{
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;
  --surface: 222 47% 13%;
  --muted-foreground: 215 20% 75%;
  --border: 215 14% 28%;
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;
  --success: 142 71% 45%;
  --warning: 45 93% 47%;
  --danger: 0 84% 60%;
}

.bg-background{ background-color: hsl(var(--background)); }
.text-foreground{ color: hsl(var(--foreground)); }
.bg-surface{ background-color: hsl(var(--surface)); }
.text-muted-foreground{ color: hsl(var(--muted-foreground)); }
.border-border{ border-color: hsl(var(--border)); }
.bg-primary{ background-color: hsl(var(--primary)); }
.text-primary-foreground{ color: hsl(var(--primary-foreground)); }

:where(button,[role="button"],a,input,select,textarea){ outline: none; }
:where(button,[role="button"],a,input,select,textarea):focus-visible{
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.sr-only{ position:absolute; 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){ *{ animation: none !important; transition: none !important; } }

.glass{ background-color: color-mix(in oklab, white 8%, transparent); border: 1px solid hsl(var(--border)); }

.badge{ display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem; border-radius:.5rem; border:1px solid hsl(var(--border)); }
.badge-easy::before{ content:"●"; color:hsl(var(--success)); }
.badge-medium::before{ content:"▲"; color:hsl(var(--warning)); }
.badge-hard::before{ content:"◆"; color:hsl(var(--danger)); }

/* Typography scale (Phase 3) */
h1{ font-size: clamp(2rem, 2.5vw + 1rem, 3rem); line-height: 1.15; font-weight: 700; }
h2{ font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); line-height: 1.2; font-weight: 600; }
h3{ font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.5rem); line-height: 1.3; font-weight: 600; }

/* Spacing rhythm utilities */
.stack-4 > * + * { margin-top: 1rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.stack-8 > * + * { margin-top: 2rem; }

/* Section vertical padding */
.section { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px){ .section{ padding-top: 4rem; padding-bottom: 4rem; } }