/* =====================================================================
   THEME — الألوان والخطوط
   الألوان مأخوذة من البورتفوليو (gvsser - portfolio 2027).
   غيّر أي لون هنا وهيتغير في الموقع كله (المكعبات والكرة والكور كمان).
   ===================================================================== */

/* ---------- الخطوط ---------- */
/* الخط العربي: ثمانية (من فولدر fonts) */
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Light.otf") format("opentype");   font-weight: 300; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Medium.otf") format("opentype");  font-weight: 500; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Bold.otf") format("opentype");    font-weight: 700; font-display: swap; }
@font-face { font-family: "Thmanyah Sans"; src: url("../fonts/thmanyahsans-Black.otf") format("opentype");   font-weight: 900; font-display: swap; }

:root {
  /* الخط الإنجليزي: SF Pro Display (متسطب على الجهاز).
     الحروف العربية هتاخد ثمانية تلقائيًا لأن SF مافيهوش عربي. */
  --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Thmanyah Sans", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Thmanyah Sans", "SF Pro Display", sans-serif;
  /* خط الـ labels الصغيرة اللي بين أقواس ( LIKE THIS ) */
  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;

  /* ---------- ألوان البورتفوليو (من غلاف gvsser portfolio 2027) ---------- */
  --navy:  #020E1A;   /* Midnight — أغمق درجة (خلفية الغلاف) */
  --deep:  #0D496B;   /* Deep Teal — الأزرق البترولي في التدرج */
  --tech:  #0A9FDE;   /* Cyan — اللون الأساسي (زراير، تحديد، لمسات) */
  --azure: #1C8FC4;   /* Cyan Glow — النور اللي حوالين الصورة */
  --cyan:  #03ABEF;   /* Bright Cyan — أقوى نور ورا راسك في الغلاف */
  --steel: #BDE4F6;   /* Ice — السيان الفاتح */
  --white: #FFFFFF;

  /* نفس الألوان بس كأرقام (عشان الشفافية) — لو غيرت لون فوق غيّره هنا كمان */
  --navy-rgb:  2, 14, 26;
  --deep-rgb:  13, 73, 107;
  --tech-rgb:  10, 159, 222;
  --azure-rgb: 28, 143, 196;
  --cyan-rgb:  3, 171, 239;
  --steel-rgb: 189, 228, 246;

  /* ---------- درجات مشتقة منهم ---------- */
  --navy-deep:  #010811;               /* أغمق شوية — خلفية الفوتر */
  --navy-card:  #05192A;               /* كروت على الخلفية الغامقة */
  --navy-line:  rgba(var(--steel-rgb), .12);
  --light-bg:   #F1F7FB;               /* خلفية الأقسام الفاتحة (زي السلايدز البيضا) */
  --light-haze: #B9DDF0;               /* السيان الفاتح اللي تحت السلايدز البيضا */
  --light-line: rgba(var(--navy-rgb), .10);

  /* ---------- الأدوار (استخدامها في الموقع) ---------- */
  --bg-dark:      var(--navy);
  --bg-light:     var(--light-bg);
  --text-on-dark: var(--white);
  --muted-on-dark: rgba(var(--steel-rgb), .68);
  --text-on-light: var(--navy);
  --muted-on-light: rgba(var(--navy-rgb), .6);
  --accent:       var(--tech);
  --accent-soft:  var(--steel);
  --on-accent:    var(--navy);         /* لون الكلام اللي فوق السيان */

  /* تدرج الهيرو — نفس الغلاف: أسود مزرق ونور سيان */
  --gradient-hero:
    radial-gradient(60% 75% at 50% 45%, rgba(var(--cyan-rgb), .55) 0%, rgba(var(--azure-rgb), .28) 30%, rgba(var(--deep-rgb), 0) 68%),
    radial-gradient(70% 55% at 100% 105%, rgba(var(--tech-rgb), .7) 0%, rgba(var(--deep-rgb), 0) 70%),
    radial-gradient(60% 50% at 0% 110%, rgba(var(--deep-rgb), .85) 0%, rgba(var(--deep-rgb), 0) 70%),
    linear-gradient(180deg, #010711 0%, var(--navy) 55%, #052238 100%);

  /* تدرج الأقسام الفاتحة من تحت — زي السلايدز البيضا */
  --gradient-haze: linear-gradient(180deg, rgba(var(--steel-rgb), 0) 0%, rgba(var(--steel-rgb), .6) 65%, rgba(var(--tech-rgb), .38) 100%);

  /* ---------- مقاسات عامة ---------- */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --max: 1440px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}