:root {
  color-scheme: dark;

  --aq-bg: #05060f;
  --aq-bg-elevated: #0a0c18;
  --aq-surface: rgba(255, 255, 255, 0.035);
  --aq-surface-strong: rgba(255, 255, 255, 0.06);
  --aq-border: rgba(255, 255, 255, 0.08);
  --aq-border-strong: rgba(255, 255, 255, 0.14);

  --aq-text: #eef2ff;
  --aq-text-muted: rgba(226, 232, 255, 0.68);
  --aq-text-faint: rgba(226, 232, 255, 0.42);

  --aq-cyan: #22d3ee;
  --aq-blue: #3b82f6;
  --aq-violet: #8b5cf6;
  --aq-indigo: #6366f1;

  --aq-grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%);
  --aq-grad-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(59, 130, 246, 0.14), rgba(139, 92, 246, 0.2));

  --aq-glow-cyan: 0 0 48px rgba(34, 211, 238, 0.28);
  --aq-glow-blue: 0 0 56px rgba(59, 130, 246, 0.24);
  --aq-glow-violet: 0 0 56px rgba(139, 92, 246, 0.22);

  --aq-radius-sm: 12px;
  --aq-radius: 18px;
  --aq-radius-lg: 28px;

  --aq-font-display: "Syne", "Outfit", "IBM Plex Sans Arabic", sans-serif;
  --aq-font-body: "Outfit", "IBM Plex Sans Arabic", sans-serif;
  --aq-font-ar: "IBM Plex Sans Arabic", "Outfit", sans-serif;

  --aq-container: 1180px;
  --aq-nav-h: 72px;
  --aq-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --aq-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
  color-scheme: light;
  --aq-bg: #f4f7ff;
  --aq-bg-elevated: #ffffff;
  --aq-surface: rgba(15, 23, 42, 0.03);
  --aq-surface-strong: rgba(15, 23, 42, 0.05);
  --aq-border: rgba(15, 23, 42, 0.08);
  --aq-border-strong: rgba(15, 23, 42, 0.14);
  --aq-text: #0b1224;
  --aq-text-muted: rgba(15, 23, 42, 0.68);
  --aq-text-faint: rgba(15, 23, 42, 0.42);
  --aq-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
}