:root {
  --primary: #0A2A66;
  --secondary: #2D7FF9;
  --accent: #18C5B5;
  --accent-dark: #00AFA0;
  --light-blue: #4EA3FF;
  --light: #F5F7FA;
  --text: #1F2937;
  --text-light: #6B7280;
  --hover: #0D5DE6;

  /* توافق مع الكود القديم */
  --brand-1: var(--secondary);
  --brand-2: var(--primary);
  --brand-3: var(--accent-dark);
  --brand-dark: var(--primary);
  --brand-soft: rgba(24, 197, 181, 0.14);
  --bg-light: var(--light);

  --gradient-primary: linear-gradient(135deg, #2D7FF9, #18C5B5);
  --gradient-accent-text: linear-gradient(90deg, #00AFA0 0%, #18C5B5 50%, #4EA3FF 100%);
  --gradient-icon: linear-gradient(135deg, #2D7FF9 0%, #4EA3FF 40%, #18C5B5 100%);
  --gradient-hero: linear-gradient(135deg, #0A2A66 0%, #2D7FF9 55%, #18C5B5 100%);

  --accent-surface: rgba(24, 197, 181, 0.12);
  --accent-border: rgba(24, 197, 181, 0.28);
  --accent-ring: rgba(45, 127, 249, 0.22);
  --shadow-soft: 0 10px 30px rgba(10, 42, 102, 0.08);
}

body {
  font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--light);
  color: var(--text);
}

/* أزرار رئيسية */
.bg-brand-1,
.btn-primary {
  background: var(--gradient-primary) !important;
  color: #fff !important;
}

.bg-brand-1:hover,
.btn-primary:hover {
  filter: brightness(1.06);
}

.bg-brand-2 {
  background: var(--primary) !important;
  color: #fff !important;
}

.text-brand-1 {
  color: var(--secondary) !important;
}

.text-brand-2 {
  color: var(--primary) !important;
}

.hover\:text-brand-1:hover {
  color: var(--hover) !important;
}

.text-gradient-accent {
  background: var(--gradient-accent-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-brand-title {
  color: var(--primary);
}

.brand-surface {
  background: var(--accent-surface);
  color: var(--accent-dark);
  border: 1px solid var(--accent-border);
}

.brand-tab-active {
  background: var(--accent-surface) !important;
  border-color: var(--accent-border) !important;
  color: var(--accent-dark) !important;
}

.brand-hero-glow-1 {
  background: radial-gradient(circle, rgba(45, 127, 249, 0.22), transparent 60%);
}

.brand-hero-glow-2 {
  background: radial-gradient(circle, rgba(24, 197, 181, 0.18), transparent 60%);
}