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

/* ----------  DESIGN TOKENS  ---------- */
:root {
  /* Brand palette */
  --blue:        #00B9FF;
  --red:         #FF3048;
  --navy:        #07131F;
  --bg:          #081018;
  --bg-2:        #0a1622;
  --white:       #FFFFFF;
  --muted:       #AAB5C4;
  --muted-dim:   #6b7787;

  /* Glass surfaces */
  --glass:       rgba(255, 255, 255, 0.06);
  --glass-2:     rgba(255, 255, 255, 0.035);
  --glass-line:  rgba(255, 255, 255, 0.10);
  --glass-line-strong: rgba(255, 255, 255, 0.18);

  /* Gradients */
  --grad:        linear-gradient(120deg, var(--blue) 0%, var(--red) 100%);
  --grad-soft:   linear-gradient(120deg, rgba(0,185,255,.18), rgba(255,48,72,.18));
  --grad-text:   linear-gradient(110deg, #5fd3ff 0%, #00B9FF 38%, #ff5d72 80%, #FF3048 100%);

  /* Default fonts (fallback) */
  --f-display:   "Cairo", "Tajawal", system-ui, sans-serif;
  --f-body:      "Cairo", "Tajawal", system-ui, sans-serif;
  --f-mono:      "JetBrains Mono", ui-monospace, monospace;

  /* Shape & motion */
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Shadows */
  --shadow:     0 24px 60px -20px rgba(0,0,0,.65);
  --shadow-lg:  0 50px 120px -40px rgba(0,0,0,.8);
  --glow-blue:  0 0 60px -10px rgba(0,185,255,.45);
  --glow-red:   0 0 60px -10px rgba(255,48,72,.40);

  --maxw: 1400px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---------- Font Overrides for Language Direction ---------- */
html[dir="rtl"] {
  --f-display: "Cairo", "Tajawal", system-ui, sans-serif;
  --f-body:    "Cairo", "Tajawal", system-ui, sans-serif;
}

html[dir="ltr"] {
  --f-display: "Inter", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
}