/* ═════════ FDX_DS v1.0 — رموز نظام تصميم فيودكس (2026-10-23)
   المصدر: ثيم رامي في معاينة new2 (h-rami.css، FDX_RAMI_THEME) مدموجاً مع a-base.css، والثيم يغلب عند التعارض.
   كل رمز مسبوق بـ--fx- كي لا يصطدم بمتغيّرات المنصّة القائمة. لا تعدّل هذا الملف داخل منصّة:
   التعديل في المرجع fudex-design-system/ ثم يُوزَّع. الثابت والمسموح في README.md §٨. ═════════ */
:root{
  /* ── الهوية الأساسية (ثابتة في كل المنصّات والوضعين) ── */
  --fx-orange:#FF5700;          /* البرتقالي: الأزرار الأساسية والتمييز والحلقات — لا لنصّ صغير على الفاتح */
  --fx-orange-lite:#FF8A4C;     /* طرف التدرّجات، والأيقونة فوق الكحلي */
  --fx-orange-hover:#FF6A1E;
  --fx-purple:#3A2666;          /* البنفسجي العميق: توهّجات المسرح، ودائرة «احجز» */
  --fx-violet:#52388A;          /* البنفسجي: «اسأل سعيد» عند المرور، وتوهّج الزاوية */
  --fx-navy:#0A183D;            /* الكحلي: المسرح، والأقسام الداكنة، ونصّ الفاتح */
  --fx-logo-navy:#121D40;       /* ألوان ملف الشعار نفسه — للمرجع فقط، ولا يُعاد تلوين الشعار */
  --fx-logo-orange:#FF5A3C;

  /* ── فوق الأسطح الداكنة دائماً (المسرح، اللوحات الكحلية، الدليل) — لا تتغيّر بالوضع ── */
  --fx-on-dark:#FFFFFF;
  --fx-on-dark-2:#C9CEE0;       /* الفقرة تحت العنوان */
  --fx-on-dark-3:#B9BED3;       /* الوصف الثانوي */
  --fx-on-dark-4:#9BA2BD;       /* الوسوم والتلميحات */
  --fx-orange-on-dark:#FFB48A;  /* رابط أو عنوان مُمرَّر عليه فوق الكحلي */
  --fx-orange-on-dark-2:#FF9A66;/* عنوان القسم الصغير فوق الكحلي */
  --fx-dk-fill:rgba(255,255,255,.06);
  --fx-dk-fill-2:rgba(255,255,255,.1);
  --fx-dk-line:rgba(255,255,255,.12);
  --fx-dk-line-2:rgba(255,255,255,.2);
  --fx-glass:rgba(11,21,54,.88);/* شرائح الاقتراحات فوق المسرح */
  --fx-scrim:rgba(10,8,22,.45); /* خلف اللوحة الجانبية والدرج */

  /* ── ألوان وظيفية ثابتة ── */
  --fx-listen:#9B87FF;          /* سعيد يسمع ويفكّر: الحلقات */
  --fx-listen-ink:#7A62E0;      /* سعيد يسمع ويفكّر: مؤشّر الصوت */
  --fx-live:#34D399;            /* نقطة «متصل» */
  --fx-live-2:#1DB86A;          /* نقطة «متصل» على الزرّ العائم */
  --fx-wa:#25D366;              /* واتساب — دائرة الأيقونة وحدها */
  --fx-white:#FFFFFF;           /* بلاطة الشعارات: بيضاء في الوضعين */
  --fx-accent:#52388A;          /* لون المنصّة الثانوي — الرمز الوحيد الذي تعيد المنصّة تعريفه (README §٨) */

  /* ── أيقونات الاقتراحات الستّ (بهذا الترتيب) ── */
  --fx-ic-1:linear-gradient(145deg,#FF7A33,#FF5700);
  --fx-ic-2:linear-gradient(145deg,#FFC24D,#F59E0B);
  --fx-ic-3:linear-gradient(145deg,#34D399,#0E9F6E);
  --fx-ic-4:linear-gradient(145deg,#9B87FF,#6A4BD1);
  --fx-ic-5:linear-gradient(145deg,#60A5FA,#2563EB);
  --fx-ic-6:linear-gradient(145deg,#6E52B0,#3A2666);

  /* ── الإطار المتدرّج (مربّع السؤال ونموذج التواصل): conic-gradient(from var(--fx-ang),var(--fx-ring-stops)) ── */
  --fx-ring-stops:#FF5700,#3A2666 30%,#52388A 55%,#FF8A4C 80%,#FF5700;

  /* ── سلّم الدرجات: الأعلى احتفال، والأحمر للانخفاض وحده (البرتقالي ليس لوناً لدرجة) ── */
  --fx-tier-top:linear-gradient(90deg,#FFD166,#FF8FAB,#B388FF,#4CC9F0,#2ED8A3); --fx-tier-top-ink:#8B5CF6;
  --fx-tier-hero:#16A34A; --fx-tier-good:#CA8A04; --fx-tier-warn:#EA580C; --fx-tier-low:#E11D48;

  /* ── الخط: RB مستضاف ذاتياً بوزنين حقيقيين فقط (400 و700) ── */
  --fx-font:"RB","IBM Plex Sans Arabic",Tahoma,"Segoe UI",system-ui,sans-serif;
  --fx-fs-display:clamp(44px,5.4vw,80px);   /* عنوان المسرح والهيرو */
  --fx-fs-display-m:clamp(34px,10.4vw,44px);/* عنوان الهيرو في الجوال */
  --fx-fs-h1:clamp(34px,4.6vw,56px);        /* عنوان صفحة داخلية */
  --fx-fs-h2:clamp(30px,4.2vw,50px);        /* عنوان القسم */
  --fx-fs-h2-sm:clamp(24px,2.6vw,34px);     /* عنوان قسم ثانوي */
  --fx-fs-h3:26px; --fx-fs-h3-sm:22px;      /* عنوان البطاقة */
  --fx-fs-lead:18px; --fx-fs-body:16px; --fx-fs-ui:15px; --fx-fs-sm:14px; --fx-fs-xs:13px; --fx-fs-2xs:12px;
  --fx-fs-num:clamp(96px,14vw,190px);       /* الرقم الكبير (+1000) */
  --fx-lh-tight:1.2; --fx-lh-head:1.3; --fx-lh-body:1.75; --fx-lh-lead:1.8;
  --fx-track-tight:-.015em;

  /* ── الزوايا ── */
  --fx-r-xs:10px; --fx-r-sm:12px; --fx-r-btn:14px; --fx-r-md:18px; --fx-r-lg:24px;
  --fx-r-card:30px; --fx-r-stage:36px; --fx-r-sec:40px; --fx-r-pill:999px;

  /* ── الظلال الثابتة ── */
  --fx-sh-1:0 1px 2px rgba(10,24,61,.06);
  --fx-sh-cta:0 8px 18px -10px rgba(255,87,0,.6);
  --fx-sh-ask:0 22px 44px -26px rgba(255,87,0,.5),0 10px 24px -18px rgba(10,24,61,.3);
  --fx-sh-menu:0 40px 80px -30px rgba(10,24,61,.45);

  /* ── المسافات والتخطيط ── */
  --fx-s-1:4px; --fx-s-2:8px; --fx-s-3:12px; --fx-s-4:16px; --fx-s-5:24px; --fx-s-6:32px; --fx-s-7:48px; --fx-s-8:64px;
  --fx-sec-y:120px;             /* بين الأقسام (الجوال 80px) */
  --fx-wrap:1200px;             /* الحاوية */
  --fx-wrap-hdr:1400px;         /* حاوية الرأس */
  --fx-gutter:24px;             /* الحافّة الجانبية (الجوال 16px) */
  --fx-stage-m:16px;            /* هامش المسرح عن حافّة الشاشة (الجوال 8px) */
  --fx-hdr:84px;                /* ارتفاع الرأس (الجوال 66px) */

  /* ── الحركة ── */
  --fx-ease:cubic-bezier(.2,.8,.2,1);
  --fx-t-fast:.2s; --fx-t-menu:.25s; --fx-t-theme:.35s; --fx-t-reveal:.8s;
}

/* ── الثيم الفاتح «رمل» (الافتراضي). الصنف fx-light يفرضه على جزء من الصفحة، وfx-dark يفرض «ليل» (للمعاينات) ── */
:root,.fx-light{
  --fx-bg:#F7F2EA;              /* أرضية الصفحة: رمل دافئ */
  --fx-paper:#FFFFFF;           /* البطاقات والقوائم والفقاعات */
  --fx-soft:#F1EADF;            /* تعبئة خفيفة: مرور، وسوم، خلفية مثال */
  --fx-line:#E6DCCB;
  --fx-line-2:#D8CCB8;
  --fx-ink:#0A183D;             /* العناوين */
  --fx-text:#2E3552;            /* النصّ */
  --fx-muted:#4A5068;           /* الثانوي */
  --fx-placeholder:#8A8FA3;
  --fx-orange-ink:#C24A00;      /* البرتقالي حين يكون نصّاً على الفاتح */
  --fx-orange-soft:#FFE6D8;
  --fx-violet-soft:#E9E2FF;
  --fx-v-ink:#52388A;
  --fx-ok:#1C8C5E; --fx-ok-soft:#D7F2E6;
  --fx-stage:#0A183D;           /* المسرح والهيرو */
  --fx-panel:#0A183D;           /* البطاقة الكحلية والقسم الكحلي واللوحة الجانبية للقائمة */
  --fx-hdr-glass:rgba(247,242,234,.86);
  --fx-sh-2:0 24px 50px -26px rgba(10,24,61,.35),0 2px 6px -2px rgba(10,24,61,.06);
  --fx-sh-3:0 40px 80px -40px rgba(10,24,61,.45);
  color-scheme:light;
}

/* ── الثيم الداكن «ليل»: الصنف dark على <html>، ومفتاحه fx-theme ── */
html.dark,.fx-dark{
  --fx-bg:#0B1430;
  --fx-paper:#121D3F;
  --fx-soft:rgba(255,255,255,.06);
  --fx-line:rgba(255,255,255,.12);
  --fx-line-2:rgba(255,255,255,.2);
  --fx-ink:#FFFFFF;
  --fx-text:#DCE0EE;
  --fx-muted:#B9BED3;
  --fx-placeholder:#8A8FA3;
  --fx-orange-ink:#FFB48A;
  --fx-orange-soft:rgba(255,120,60,.16);
  --fx-violet-soft:rgba(150,120,255,.18);
  --fx-v-ink:#B7A2FF;
  --fx-ok:#5FD7A4; --fx-ok-soft:rgba(60,200,140,.14);
  --fx-stage:#16224A;
  --fx-panel:#121D3F;
  --fx-hdr-glass:rgba(11,20,48,.86);
  --fx-sh-2:0 30px 60px -28px rgba(0,0,0,.7);
  --fx-sh-3:0 40px 90px -36px rgba(0,0,0,.8);
  color-scheme:dark;
}

@media (max-width:760px){
  :root{--fx-hdr:66px; --fx-gutter:16px; --fx-stage-m:8px; --fx-sec-y:80px}
}