:root {
  --bg-1: #050816;
  --bg-2: #101935;

  --color-primary: #61dafb;
  --color-primary-dark: #2ba7d0;
  --color-accent: #8b5cf6;
  --color-success: #2cffb0;

  --color-text: #eef6ff;
  --color-muted: #94a3b8;
  --color-surface: rgba(255, 255, 255, 0.08);
  --color-surface-strong: rgba(255, 255, 255, 0.12);
  --color-border: rgba(255, 255, 255, 0.16);
  --color-danger: #fb7185;

  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-xl: 34px;

  --shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.45);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  color: var(--color-text);
  background:
    radial-gradient(circle at 20% 20%, rgba(97, 218, 251, 0.18), transparent 32%),
    radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.22), transparent 34%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2));
}

a {
  color: var(--color-primary);
}