:root {
  --primary: hsl(231, 65%, 50%);
  --primary-dark: hsl(231, 65%, 35%);
  --primary-light:  hsl(231, 65%, 70%);
  --secondary: hsl(261, 55%, 50%);
  --radius: 8px;
  --shadow: 0 4px 12px rgba(0,0,0,0.15);
  --font-scale: 1.12;
  --font-display: 'Roboto Slab', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --text: #0f172a;
  --text-muted: #475569;
  --surface: #ffffff;
  --on-surface: #0f172a;
  --on-primary: #ffffff;
}