/* ==========================================================================
   AAC Energy — Design Tokens
   مستخرجة مباشرة من ملف Figma (canvas: Design System + الاستخدام الفعلي)
   ========================================================================== */

:root {
  /* ---------- الألوان الأساسية ---------- */
  --aac-primary: #3F7EC1;          /* اللون الأساسي — 129 استخدام */
  --aac-primary-light: #4D97E5;    /* تدرّج أفتح للأزرار والروابط */
  --aac-primary-dark: #2F5D97;
  --aac-primary-darker: #306399;

  /* ---------- الألوان المحايدة ---------- */
  --aac-ink: #020713;              /* النص الأساسي الداكن */
  --aac-navy: #152F50;             /* نص ثانوي / روابط الفوتر */
  --aac-navy-deep: #091C31;
  --aac-charcoal: #141A21;
  --aac-muted: #828C9F;            /* نص خافت — 116 استخدام */
  --aac-gray: #6A7282;
  --aac-gray-light: #A1A9B9;
  --aac-white: #FFFFFF;
  --aac-black: #000000;

  /* ---------- درجات فاتحة (خلفيات) ---------- */
  --aac-tint: #C5D5F6;
  --aac-tint-light: #EBF1FC;
  --aac-primary-80: #80AAEE;

  /* ---------- أدوار دلالية ---------- */
  --aac-text: var(--aac-ink);
  --aac-text-secondary: var(--aac-navy);
  --aac-text-muted: var(--aac-muted);
  --aac-text-invert: var(--aac-white);
  --aac-surface: var(--aac-white);
  --aac-surface-alt: var(--aac-tint-light);
  --aac-surface-dark: var(--aac-ink);
  --aac-border: rgba(2, 7, 19, 0.10);
  --aac-link: var(--aac-primary);
  --aac-link-hover: var(--aac-primary-dark);
  --aac-focus: var(--aac-primary-light);

  /* ---------- الخطوط ----------
     التصميم مبني على Segoe UI (خط نظام مايكروسوفت، غير مرخّص للاستضافة).
     البديل اللاتيني: Selawik — بديل مفتوح المصدر من مايكروسوفت متوافق
     مقاسياً مع Segoe UI، فتنكسر الأسطر بنفس مواضع التصميم تماماً.
     البديل العربي: IBM Plex Sans Arabic.
     ------------------------------------------------------------------ */
  --aac-font-latin: "Selawik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --aac-font-arabic: "IBM Plex Sans Arabic", "Selawik", "Segoe UI", system-ui, sans-serif;
  --aac-font-body: var(--aac-font-latin);
  --aac-font-heading: var(--aac-font-latin);

  /* ---------- سلم الخطوط (مطابق للتصميم) ---------- */
  --aac-text-xs: 0.75rem;      /* 12 */
  --aac-text-sm: 0.875rem;     /* 14 */
  --aac-text-base: 1rem;       /* 16 — الأكثر استخداماً */
  --aac-text-lg: 1.125rem;     /* 18 */
  --aac-text-xl: 1.25rem;      /* 20 */
  --aac-text-2xl: 1.5rem;      /* 24 */
  --aac-text-3xl: 1.875rem;    /* 30 */
  --aac-text-4xl: 2.25rem;     /* 36 */
  --aac-text-5xl: 3rem;        /* 48 */
  --aac-text-6xl: 3.75rem;     /* 60 */
  --aac-text-7xl: 4.5rem;      /* 72 */
  --aac-text-8xl: 6rem;        /* 96 — عناوين الهيرو */

  --aac-weight-regular: 400;
  --aac-weight-semibold: 600;
  --aac-weight-bold: 700;

  --aac-leading-tight: 1.1;
  --aac-leading-snug: 1.3;
  --aac-leading-normal: 1.5;
  --aac-leading-relaxed: 1.65;

  /* ---------- المسافات ---------- */
  --aac-space-1: 0.25rem;   /* 4 */
  --aac-space-2: 0.5rem;    /* 8 */
  --aac-space-3: 0.75rem;   /* 12 */
  --aac-space-4: 1rem;      /* 16 */
  --aac-space-5: 1.25rem;   /* 20 */
  --aac-space-6: 1.5rem;    /* 24 — الأكثر استخداماً */
  --aac-space-8: 2rem;      /* 32 */
  --aac-space-10: 2.5rem;   /* 40 */
  --aac-space-12: 3rem;     /* 48 */
  --aac-space-16: 4rem;     /* 64 */
  --aac-space-20: 5rem;     /* 80 — حشو الأقسام */
  --aac-space-28: 7rem;     /* 112 */
  --aac-space-36: 9rem;     /* 144 — حشو الأقسام الكبيرة */
  --aac-space-50: 12.5rem;  /* 200 */

  /* ---------- التخطيط ---------- */
  --aac-container: 80rem;            /* 1280 — عرض المحتوى */
  --aac-design-width: 90rem;         /* 1440 — عرض التصميم الأصلي */
  --aac-gutter: var(--aac-space-20); /* 80 على الديسكتوب */
  --aac-gutter-mobile: var(--aac-space-5);
  --aac-header-height: 4.25rem;      /* 68 */

  /* ---------- أنصاف الأقطار ---------- */
  --aac-radius-sm: 0.375rem;   /* 6 */
  --aac-radius-md: 0.5rem;     /* 8 — الأزرار */
  --aac-radius-lg: 0.75rem;    /* 12 */
  --aac-radius-xl: 1rem;       /* 16 — البطاقات، الأكثر استخداماً */
  --aac-radius-pill: 6.25rem;  /* 100 */
  --aac-radius-full: 9999px;

  /* ---------- الظلال ---------- */
  --aac-shadow-z4: 0 4px 8px 0 rgba(2, 7, 19, 0.08);
  --aac-shadow-z8: 0 8px 16px 0 rgba(2, 7, 19, 0.10);
  --aac-shadow-z24: 0 12px 24px -4px rgba(2, 7, 19, 0.16);
  --aac-shadow-primary: 0 8px 16px 0 rgba(63, 126, 193, 0.24);

  /* ---------- الحركة ---------- */
  --aac-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --aac-z-header: 100;
  --aac-z-dropdown: 110;
  --aac-z-overlay: 200;
}

/* الخط يتبدّل تلقائياً حسب لغة الصفحة */
:root:lang(ar),
[dir="rtl"] {
  --aac-font-body: var(--aac-font-arabic);
  --aac-font-heading: var(--aac-font-arabic);
  /* العربي يحتاج ارتفاع سطر أكبر قليلاً */
  --aac-leading-normal: 1.6;
  --aac-leading-relaxed: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  :root { --aac-transition: 0ms; }
}

/* ==========================================================================
   نظام التصميم الرسمي — مستخرج مباشرة من صفحة Design System في ملف Figma
   ========================================================================== */
:root {
  /* primary */
  --p-50:#E0E8FA; --p-100:#C5D5F6; --p-200:#80AAEE; --p-300:#4583D1; --p-400:#2F5D97;
  --p-500:#1A385E; --p-600:#152F50; --p-700:#0F243F; --p-800:#091A30; --p-900:#051122; --p-950:#020713;
  /* accent */
  --a-50:#EBF1FC; --a-100:#D7E3F9; --a-200:#B1CBF5; --a-300:#82B0EF; --a-400:#4D97E5;
  --a-500:#3F7EC1; --a-600:#306399; --a-700:#234B75; --a-800:#163453; --a-900:#091C31; --a-950:#051121;
  /* gray */
  --g-50:#F0F1F3; --g-100:#E0E2E8; --g-200:#BFC4CF; --g-300:#A1A9B9; --g-400:#828C9F;
  --g-500:#6A7282; --g-600:#535A67; --g-700:#3F454F; --g-800:#2B2E36; --g-900:#191C21; --g-950:#0F1115;

  /* سلّم الطباعة وارتفاعات الأسطر كما هي في الملف */
  --t-xs:12px;  --lh-xs:1.5;
  --t-sm:14px;  --lh-sm:1.5;
  --t-base:16px;--lh-base:1.5;
  --t-lg:18px;  --lh-lg:1.5;
  --t-xl:20px;  --lh-xl:1.3;
  --t-2xl:24px; --lh-2xl:1.2;
  --t-3xl:30px; --lh-3xl:1.2;
  --t-4xl:36px; --lh-4xl:1.1;
  --t-5xl:48px; --lh-5xl:1.1;
  --t-6xl:60px; --lh-6xl:1.0;
  --t-7xl:72px; --lh-7xl:1.0;
  --t-8xl:96px; --lh-8xl:1.0;

  --aac-font: "Segoe UI", Selawik, "IBM Plex Sans Arabic", system-ui, sans-serif;
  --design-w: 1440px;
  --design-gutter: 144px;   /* حشو جانبي التصميم */
}