:root {
  /* Colors */
  --color-bg:            #020105;
  --color-surface:       rgba(255, 255, 255, 0.03);
  --color-primary:       #5A3EEA;
  --color-primary-hover: #6d52f0;
  --color-primary-dim:   rgba(90, 62, 234, 0.15);
  --color-text:          #ECF0F1;
  --color-muted:         rgba(236, 240, 241, 0.4);
  --color-border:        rgba(236, 240, 241, 0.12);
  --color-border-focus:  rgba(90, 62, 234, 0.7);
  --color-error:         #FF5C5C;
  --color-error-dim:     rgba(255, 92, 92, 0.12);
  --color-success:       #4CD97B;

  /* Typography */
  --font-family:  "hagrid-text", Helvetica, Arial, sans-serif;
  --font-label:   clamp(1.25rem, 3vw, 1.875rem);
  --font-input:   clamp(1rem, 2vw, 1.35rem);
  --font-btn:     clamp(0.85rem, 1.1vw, 1rem);
  --font-sm:      clamp(0.75rem, 0.9vw, 0.825rem);
  --font-counter: clamp(0.7rem, 0.85vw, 0.8rem);

  /* Radii */
  --radius-btn:   6px;
  --radius-input: 8px;
  --radius-card:  10px;

  /* Transitions */
  --transition:      300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --header-height: clamp(52px, 8vh, 72px);
  --stage-padding: clamp(1rem, 3vw, 2.5rem);
}