/* Custom Theme: Modern Dark Blue (HeroUI-inspired) */
:root {
  /* Backgrounds */
  --bg: #0a0e1a;
  --bg-soft: #111827;
  --surface: #1a1f35;
  --surface-2: #242b42;

  /* Borders */
  --border: rgba(99, 179, 237, 0.15);
  --border-strong: rgba(99, 179, 237, 0.3);

  /* Text */
  --text-1: #f0f6fc;
  --text-2: #c9d1d9;
  --text-3: #8b949e;

  /* Primary Blue Gradient (like HeroUI) */
  --accent: #0072f5;
  --accent-2: #00c6ff;
  --accent-3: #7828c8;

  /* Status Colors */
  --good: #17c964;
  --warn: #f5a524;
  --bad: #f31260;

  /* Gradients */
  --grad: linear-gradient(135deg, #0072f5 0%, #00c6ff 100%);
  --grad-soft: linear-gradient(135deg, rgba(0, 114, 245, 0.1) 0%, rgba(0, 198, 255, 0.1) 100%);

  /* Radii */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* Shadows - subtle glow */
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(99, 179, 237, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 179, 237, 0.12);

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --letter-tight: -0.02em;
  --letter-normal: -0.01em;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card enhancements */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.card-accent {
  border-top-width: 2px;
  border-top-color: var(--accent);
  background: linear-gradient(to bottom, rgba(0, 114, 245, 0.05), transparent);
}

/* Gradient text enhancement */
.gradient-text {
  background: linear-gradient(135deg, #0072f5 0%, #00c6ff 50%, #7828c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Accent divider */
.divider-accent {
  background: linear-gradient(90deg, #0072f5 0%, #00c6ff 100%);
  height: 3px;
  width: 80px;
  box-shadow: 0 0 20px rgba(0, 114, 245, 0.5);
}

/* Pills */
.pill {
  background: rgba(0, 114, 245, 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(0, 198, 255, 0.2);
}

.pill-accent {
  background: linear-gradient(135deg, rgba(0, 114, 245, 0.2), rgba(0, 198, 255, 0.2));
  color: #00c6ff;
  border: 1px solid rgba(0, 198, 255, 0.4);
  box-shadow: 0 0 12px rgba(0, 198, 255, 0.2);
}

/* Kicker enhancement */
.kicker {
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Headings */
h1.title, h2.title, .h1, .h2 {
  color: var(--text-1);
  font-weight: 700;
}