/* تعريف المتغيرات للألوان (الوضع المظلم الافتراضي) */
:root {
    --bg: #0f2027;
    --card: #1e2a32;
    --text: #ffffff;
    --accent: #00c6ff;
  }
  
  /* تغيير الألوان عند تفعيل كلاس light عبر الجافاسكريبت */
  body.light {
    --bg: #f4f4f4;
    --card: #ffffff;
    --text: #222;
    --accent: #0077ff;
  }
  
  /* تنسيقات عامة للجسم */
  body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: 0.4s; /* تنعيم التحول بين الألوان */
  }
  
  /* تنسيق الحاوية الرئيسية */
  .container {
    max-width: 400px;
    margin: auto;
    padding: 20px;
    text-align: center;
  }
  
  /* تنسيق صورة البروفايل وحركة الطفو */
  .profile img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--accent);
    animation: float 3s ease-in-out infinite;
  }
  
  /* تأثير حركة الطفو للصورة */
  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  h1 { margin: 10px 0; }
  
  /* تنسيق أزرار الروابط */
  .links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; 
    background: var(--card);
    margin: 12px 0;
    padding: 14px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    font-size: 18px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    font-weight: 500;
  }
  
  /* تأثير عند تمرير الماوس على الزر */
  .links a:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  
  /* تمييز زر الـ CV */
  .cv-btn { 
    border: 2px solid var(--accent) !important; 
    background: rgba(0, 198, 255, 0.1) !important; 
  }
  
  /* تنسيق زر تبديل الوضع (Dark/Light) */
  .toggle { 
    margin: 15px; 
    cursor: pointer; 
    padding: 10px 15px; 
    border-radius: 20px; 
    border: none; 
    background: var(--accent); 
    color: white; 
    font-weight: bold; 
  }
  
  footer { 
    margin-top: 30px; 
    font-size: 14px; 
    opacity: 0.7; 
  }
  
  /* ألوان الأيقونات الخاصة بكل منصة */
  .fa-whatsapp { color: #25D366; } 
  .fa-facebook { color: #1877F2; } 
  .fa-instagram { color: #E4405F; }
  .fa-snapchat { color: #FFFC00; text-shadow: 0 0 2px black; } 
  .fa-telegram { color: #0088cc; }
  .fa-envelope { color: #EA4335; } 
  .fa-linkedin { color: #0077B5; } 
  .fa-x-twitter { color: #000000; }
  
  /* تعديل لون أيقونات معينة في الوضع الفاتح لتظل واضحة */
  body.light .fa-x-twitter, body.light .fa-tiktok { color: #000; }