/* ============================================================
   Shareflow — Design Tokens
   نظام التصميم: Dark-Mode SaaS · مستوحى من هوية اللوغو (كحلي + ذهبي)
   ============================================================ */

:root {
  /* ---- Palette: Backgrounds ---- */
  --bg:            #0A0F24;   /* كحلي شبه أسود — الخلفية الأساسية */
  --bg-2:          #0E1638;   /* طبقة أعمق قليلاً للأقسام المتناوبة */
  --bg-3:          #111C44;   /* بطاقات/أسطح مرتفعة */
  --navy:          #16225A;   /* كحلي اللوغو */
  --navy-deep:     #0C1534;
  --surface:       rgba(255, 255, 255, 0.045);
  --surface-2:     rgba(255, 255, 255, 0.07);
  --surface-solid: #131E4A;

  /* ---- Palette: Brand accents ---- */
  --gold:          #D4AF63;
  --gold-light:    #E9D08A;
  --gold-deep:     #B8862F;
  --gold-grad:     linear-gradient(135deg, #E9D08A 0%, #D4AF63 45%, #B8862F 100%);
  --blue:          #2E7FD6;   /* أزرق كهربائي */
  --blue-light:    #5AA6F0;
  --blue-deep:     #1C4E9E;
  --blue-grad:     linear-gradient(135deg, #5AA6F0 0%, #2E7FD6 55%, #1C4E9E 100%);

  /* ---- Text ---- */
  --text:          #EAF0FF;
  --text-strong:   #FFFFFF;
  --muted:         #93A0C8;
  --muted-2:       #6E7CA8;

  /* ---- Borders & lines ---- */
  --border:        rgba(255, 255, 255, 0.09);
  --border-gold:   rgba(212, 175, 99, 0.35);
  --border-blue:   rgba(46, 127, 214, 0.35);

  /* ---- Glow / shadows ---- */
  --glow-gold:     0 0 40px rgba(212, 175, 99, 0.22);
  --glow-blue:     0 0 40px rgba(46, 127, 214, 0.25);
  --shadow-card:   0 18px 40px -18px rgba(0, 0, 0, 0.7);
  --shadow-float:  0 40px 80px -30px rgba(0, 0, 0, 0.85);

  /* ---- State: semantic ---- */
  --danger:        #E5644E;
  --success:       #37C98B;

  /* ---- Typography ---- */
  --font-ar: "Tajawal", "Cairo", system-ui, "Segoe UI", sans-serif;
  --font-en: "Inter", system-ui, "Segoe UI", sans-serif;
  --font: var(--font-ar);

  --fs-hero:   clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
  --fs-h2:     clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem);
  --fs-h3:     clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  --fs-body:   clamp(0.98rem, 0.93rem + 0.25vw, 1.08rem);
  --fs-sm:     0.9rem;
  --fs-xs:     0.78rem;

  --lh-tight:  1.18;
  --lh:        1.75;

  /* ---- Spacing & rhythm ---- */
  --space-section: clamp(4rem, 2.5rem + 7vw, 8rem);
  --container:  1200px;
  --container-wide: 1360px;
  --gutter:     clamp(1.15rem, 0.6rem + 2.5vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm:  10px;
  --r:     16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.55s;

  /* ---- Header ---- */
  --header-h: 74px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; }
}