/* ============================================================
   VARIABLES – Kazuma Ali Portfolio
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Poppins:wght@400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

:root {
    /* ---- Primary palette: Blue → Green gradients ---- */
    --gradient-hero: linear-gradient(135deg, #0b2b3b 0%, #1a5a6b 40%, #2d8f7a 80%, #4ecdc4 100%);
    --gradient-card: linear-gradient(145deg, rgba(13, 44, 58, 0.85), rgba(26, 90, 107, 0.70));
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    --gradient-btn: linear-gradient(135deg, #2b9b8a, #4ecdc4);
    --gradient-btn-hover: linear-gradient(135deg, #3db3a0, #6ee0d6);
    --gradient-accent: linear-gradient(135deg, #4ecdc4, #6ee0d6);

    /* ---- Solid shades (no flat colors) ---- */
    --bg-body: #0a1e28;
    --bg-card: rgba(12, 40, 54, 0.80);
    --bg-glass: rgba(255, 255, 255, 0.06);
    --text-primary: #eaf4f0;
    --text-secondary: #b8d9d4;
    --text-muted: #7ea8a3;
    --border-glow: rgba(78, 205, 196, 0.25);
    --shadow-glow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(78, 205, 196, 0.15);

    /* ---- Typography ---- */
    --font-en: 'Inter', 'Poppins', sans-serif;
    --font-fa: 'Vazirmatn', 'Cairo', sans-serif;
    --font-ar: 'Cairo', 'Vazirmatn', sans-serif;

    /* ---- Sizing ---- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-card: 0 12px 48px rgba(0, 0, 0, 0.45);

    /* ---- RTL awareness ---- */
    --dir: ltr;
    --start: left;
    --end: right;
}