/* brand.css — هوية Ceresify (المعتمدة).
 *
 * المكان الوحيد اللي تنعرّف بيه ألوان الهوية. كل صفحة تربطه بالـ head
 * قبل ستايلها الخاص، ومتغيرات الصفحة القديمة (--gold, --bg-card…)
 * صارت تشير لهني بدل ما تحمل ألوان.
 *
 * قواعد التباين (محسوبة، WCAG):
 *   --brand نص فوق --ink/--surface-dark فقط (6.1 / 5.1).
 *   فوق الفاتح نستخدم --brand-text (5.0 فوق --bg).
 *   --accent-gold نص فوق الغامق فقط (8.0)، فوق الفاتح يصير خلفية وفوقه --ink.
 *   النص فوق --brand دائماً --on-brand (6.1) — الأبيض 2.5 فقط.
 */
:root{
  --brand:        #5BA4FF;
  --brand-hover:  #7DB7FF;
  --brand-text:   #2A64C2;
  --on-brand:     #1E2330;
  --ink:          #1E2330;
  --surface-dark: #2A3040;
  --bg:           #EEF2F7;
  --surface:      #FFFFFF;
  --muted:        #5C6375;
  --muted-dark:   #A3AABB;
  --border:       #D5DBE5;
  --accent-gold:  #E3B25A;

  /* مشتقات — درجات خلفية بدل الظلال، وحالات */
  --surface-2:     #F6F8FB;                    /* خطوة فوق --surface */
  --brand-tint:    rgba(91,164,255,0.14);
  --brand-line:    rgba(91,164,255,0.38);
  --line-dark:     rgba(255,255,255,0.10);     /* فاصل 1px شفاف فوق الغامق */
  --ok:            #1F7A45;                    /* أخضر يقرا فوق الفاتح (5.2) */
  --ok-on-dark:    #6FD39A;
  --danger:        #B42318;
  --danger-on-dark:#FF8A7A;

  --r-pill: 999px;
  --r-card: 32px;
  --r-icon: 14px;

  --font-ar:   'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-lat:  'Sora', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Sans Arabic', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

/* ═══ الخطوط ═══
   العربي بـ Plex. العناوين والأزرار والأرقام البارزة بـ Sora أولاً — Sora
   ما بيه حروف عربية فالعربي يرجع لـ Plex لحاله، واللاتيني والأرقام
   تطلع Sora. النص العادي (400) يبقى Plex حتى ما يطلع اللاتيني بوزن 600. */
html, body, button, input, textarea, select, optgroup{
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6, b, strong, button,
.nav-link, .nav-cta, .brand-word, .num, .price,
[data-nums], .stat-v, .stat-num{
  font-family: var(--font-lat);
}
h1, h2, h3{font-weight: 700;}
code, pre, kbd, samp, .mono, .info-value, .dc-row .v, .p-meta .badge{
  font-family: var(--font-mono) !important;
}
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
i[class*="fa-"], i[class*="fa-"]::before{
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

/* تباعد الحروف يقطّع وصل الحروف العربية — صفر بكل مكان، إلا الشعار اللاتيني */
*, *::before, *::after{letter-spacing: 0 !important;}
.brand-word{letter-spacing: -0.4px !important;}

a{color: var(--brand-text);}

/* ═══ الشعار ═══ */
.brand-lockup{
  display: inline-flex; align-items: center; gap: 10px;
  direction: ltr;                      /* الشعار ثم الكلمة، حتى بالصفحات RTL */
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
.brand-lockup img{height: 40px; width: 40px; display: block;}
.brand-word{
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -0.4px; line-height: 1;
  direction: ltr; unicode-bidi: isolate;
}
.brand-lockup.on-dark{color: #FFFFFF;}

/* ═══ الزر الأساسي ═══ */
.btn-brand{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 32px;
  background: var(--brand); color: var(--on-brand);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-lat); font-weight: 700; font-size: 18px;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease;
}
.btn-brand:hover{background: var(--brand-hover); color: var(--on-brand);}

/* ═══ اللودر ═══ */
.cs-loader{display: inline-block; width: 48px; height: 48px; vertical-align: middle;}
.cs-loader.sm{width: 40px; height: 40px; margin-block: -10px;}   /* داخل الأزرار والأسطر — ما يكبّر الزر */
.cs-loader-wrap{display: flex; justify-content: center; padding: 24px 0;}
.cs-loading-screen{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}

/* ═══ الحركة ═══ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior: auto !important;}
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}