:root {
  --bg: #020408;
  --bg-elevated: #080c14;
  --card: rgba(10, 16, 28, 0.82);
  --card-solid: #0a101c;
  --border: rgba(6, 182, 212, 0.12);
  --border-glow: rgba(6, 182, 212, 0.35);

  --teal: #06b6d4;
  --teal-light: #22d3ee;
  --teal-dim: #0891b2;
  --violet: #7c3aed;
  --accent-teal: #06b6d4;

  --gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 40%, #7c3aed 100%);
  --gradient-soft: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(124, 58, 237, 0.08));
  --gradient-cta: linear-gradient(90deg, #06b6d4, #22d3ee, #7c3aed);

  --text: #f0f9ff;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --nav-h: 72px;
  --sidebar-w: 260px;
  --max-w: 1180px;
  --font: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", var(--font);

  --shadow-glow: 0 0 48px rgba(6, 182, 212, 0.2);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5);
  --clip-angular: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}