/* ==========================================================================
   الأهرام للدعاية والإعلان — Design tokens
   لون / خط / مسافة / حركة. غيّر هنا فقط لتغيير مظهر الموقع كله.
   ========================================================================== */

/* الخطوط تُحمّل عبر <link> في رأس كل صفحة (أسرع من @import). */

:root {
  /* ---------- surfaces ---------- */
  --ink-950: #08090B;
  --ink-900: #0E1013;
  --ink-850: #131619;
  --ink-800: #171A1F;
  --ink-750: #1D2126;
  --line:    #262B32;
  --line-soft: #1C2026;

  /* ---------- ink ---------- */
  --silver-050: #FFFFFF;
  --silver-100: #EEF1F4;
  --silver-200: #D6DBE1;
  --silver-300: #B4BBC3;
  --silver-400: #8E969F;   /* تباين ~6.1:1 على خلفية الكروت */
  --silver-500: #7E868F;   /* تباين ~4.9:1 — أدنى لون مسموح للنص الصغير */
  --silver-600: #6A727B;   /* للعناصر الزخرفية فقط، مش لنص يُقرأ */

  /* ---------- brand sheen (يحاكي وجوه الشعار المعدنية) ---------- */
  --sheen:        linear-gradient(135deg, #FFFFFF 0%, #E4E8ED 22%, #A8B0B9 55%, #EDF0F3 78%, #7F868F 100%);
  --sheen-soft:   linear-gradient(135deg, #FFFFFF 0%, #C9CFD6 60%, #8A929B 100%);
  --sheen-line:   linear-gradient(90deg, transparent, #C9CFD6 45%, #FFFFFF 50%, #C9CFD6 55%, transparent);
  --edge:         rgba(255,255,255,.10);
  --edge-strong:  rgba(255,255,255,.26);

  /* ---------- الذهبي — مخصّص للعروض فقط حتى تنفصل عن باقي الموقع ---------- */
  --gold-100: #F7E9C6;
  --gold-300: #E4C377;
  --gold-500: #C79A3E;
  --gold-line: rgba(199, 154, 62, .32);
  --gold-glow: rgba(199, 154, 62, .12);
  --sheen-gold: linear-gradient(135deg, #FBF0D4 0%, #E4C377 42%, #FBF0D4 60%, #B98C33 100%);

  --accent:      #E7EBEF;   /* الفضي المضيء — للتركيز والأزرار */
  --accent-dim:  #9AA2AB;
  --success:     #56C08A;   /* واتساب فقط */

  /* ---------- typography ---------- */
  --font-head: 'Tajawal', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-lat:  'Sora', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --fs-display: clamp(2.4rem, 1.15rem + 5.1vw, 5.4rem);
  --fs-h1:      clamp(2rem,   1.15rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 1.1rem  + 2.1vw, 2.6rem);
  --fs-h3:      clamp(1.15rem, .98rem + .75vw, 1.5rem);
  --fs-lead:    clamp(1rem,   .94rem  + .35vw, 1.2rem);
  --fs-body:    clamp(.94rem, .9rem   + .18vw, 1.02rem);
  --fs-sm:      .875rem;
  --fs-xs:      .78rem;

  /* ---------- space ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --wrap: 1240px;
  --wrap-narrow: 860px;

  /* ---------- shape ---------- */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-pill: 999px;

  /* ---------- shadow ---------- */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
  --shadow-md: 0 14px 40px -18px rgba(0,0,0,.85);
  --shadow-lg: 0 36px 90px -40px rgba(0,0,0,.95);
  --glow:      0 0 0 1px rgba(255,255,255,.07), 0 24px 60px -30px rgba(200,210,220,.35);

  /* ---------- motion ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .34s;
  --t-slow: .7s;

  --header-h: 74px;
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t: .01ms; --t-slow: .01ms; }
}