@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --page-bg: #13141f;
  --page-bg-2: #1b1d2b;
  --page-glow-1: rgba(111, 106, 216, 0.35);
  --page-glow-2: rgba(63, 90, 160, 0.25);

  --glass-bg: rgba(24, 26, 38, 0.82);
  --glass-bg-strong: rgba(24, 26, 38, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 18px 40px rgba(7, 9, 18, 0.45);
  --glass-blur: 24px;

  --text-primary: rgba(244, 245, 255, 0.95);
  --text-secondary: rgba(203, 207, 232, 0.7);
  --text-muted: rgba(171, 176, 205, 0.5);

  --accent-primary: #6f6ad8;
  --accent-primary-strong: #8179f1;
  --accent-info: #7ba3c9;
  --accent-warm: #f2b976;
  --accent-success: #6dbfa5;
  --accent-danger: #d77783;

  --accent-alpha-5: rgba(111, 106, 216, 0.05);
  --accent-alpha-10: rgba(111, 106, 216, 0.1);
  --accent-alpha-20: rgba(111, 106, 216, 0.2);
  --accent-alpha-30: rgba(111, 106, 216, 0.3);
  --accent-alpha-50: rgba(111, 106, 216, 0.5);

  --card-bg: rgba(111, 106, 216, 0.08);
  --card-border: rgba(111, 106, 216, 0.18);
  --card-hover: rgba(111, 106, 216, 0.14);

  --btn-primary-bg: linear-gradient(135deg, #6f6ad8 0%, #8a82f4 100%);
  --btn-primary-shadow: 0 12px 28px rgba(111, 106, 216, 0.35);
  --btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --btn-secondary-border: rgba(255, 255, 255, 0.16);

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  background: radial-gradient(1100px 600px at 12% -10%, var(--page-glow-1), transparent 70%),
              radial-gradient(900px 520px at 90% 12%, var(--page-glow-2), transparent 70%),
              linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-2) 100%) !important;
  letter-spacing: 0.12px !important;
}

h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
}

p {
  color: var(--text-secondary) !important;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

.glass {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  box-shadow: var(--glass-shadow) !important;
}

.glass-strong {
  background: var(--glass-bg-strong) !important;
}

.btn-primary {
  background: var(--btn-primary-bg) !important;
  box-shadow: var(--btn-primary-shadow) !important;
  color: #0f111c !important;
  border-radius: 999px !important;
}

.btn-secondary {
  background: var(--btn-secondary-bg) !important;
  border: 1px solid var(--btn-secondary-border) !important;
  color: var(--text-primary) !important;
  border-radius: 999px !important;
}

.tag-pill {
  background: rgba(111, 106, 216, 0.2) !important;
  color: var(--accent-primary-strong) !important;
  border: 1px solid rgba(111, 106, 216, 0.35) !important;
  border-radius: 999px !important;
}

.divider-line {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) !important;
  height: 1px !important;
}