/* ============================================================
   Design Tokens — المصدر الوحيد للحقيقة لكل قيم التصميم.
   يُحمَّل قبل base.css في كل صفحة (تطبيق أو Landing).
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Colors: Palette (12 base colors) ----------
     المصدر الوحيد للألوان: أربع لوحات × ثلاث درجات (داكن / متوسط / فاتح).
     هذه القيم الافتراضية؛ تُستبدل بما يحفظه المدير من صفحة "ألوان المنصة"
     عبر /theme.css (يُحمَّل بعد هذا الملف). كل لون آخر في النظام مشتق منها
     بـ color-mix — لا تكتب ألوانًا ثابتة في باقي ملفات CSS. */
  --palette-forest-dark: #002623;
  --palette-forest-mid: #054239;
  --palette-forest-light: #428177;

  --palette-wheat-dark: #988561;
  --palette-wheat-mid: #b9a779;
  --palette-wheat-light: #edebe0;

  --palette-charcoal-dark: #161616;
  --palette-charcoal-mid: #3d3a3b;
  --palette-charcoal-light: #ffffff;

  --palette-umber-dark: #260f14;
  --palette-umber-mid: #4a151e;
  --palette-umber-light: #6b1f2a;

  /* ---------- Colors: Brand ---------- */
  --color-primary: var(--palette-forest-mid);
  --color-primary-dark: var(--palette-forest-dark);
  --color-primary-deep: var(--palette-forest-dark);
  --color-primary-soft: color-mix(in srgb, var(--palette-forest-light) 14%, #fff);

  /* Muted gold accent — shared with the landing page identity (landing.css),
     used sparingly inside the app for highlights/emphasis, never as a base color. */
  --color-accent-gold: var(--palette-wheat-dark);
  --color-accent-gold-soft: var(--palette-wheat-light);
  --color-accent-gold-line: var(--palette-wheat-mid);

  /* ---------- Colors: Surface & Text ----------
     Canvas بارد محايد (≈80% من الواجهة) — لا يُشتق من لوحة المركز فلا يعود بيجيًا/كريميًا أيًّا كانت ألوان العلامة.
     الأسطح متدرجة بدقة: canvas < surface (أبيض) · muted (تعبئة) · selected (تلوين العلامة). docs/ui-design-system.md */
  --neutral-0: #ffffff;
  --neutral-25: #f9fafb;
  --neutral-50: #f5f8fc;
  --neutral-100: #eff1f4;
  --neutral-200: #e3e6eb;
  --neutral-300: #d0d5dd;
  --neutral-500: #667085;
  --neutral-600: #525c6b;
  --neutral-900: #1b2230;

  --color-bg: var(--neutral-50);          /* surface-canvas */
  --color-surface: var(--palette-charcoal-light);
  --color-surface-secondary: var(--neutral-100);
  --color-text: var(--neutral-900);
  /* النص الثانوي/الخافت ≥ 4.5:1 على الأبيض (التواريخ والـmeta تُقرأ فعلًا). */
  --color-text-muted: var(--neutral-600);
  --color-text-faint: var(--neutral-500);

  /* أربع درجات فصل بدل لون حدّ واحد لكل شيء:
     hairline = حافة السطح · divider = فاصل بين الصفوف · field = حدّ الحقول (يجب أن يُرى)
     · border-strong = تأكيد (hover/dashed). كلها رمادي أزرق بارد. */
  --color-hairline: var(--neutral-200);
  --color-divider: color-mix(in srgb, var(--neutral-200) 70%, transparent);
  --color-divider-solid: var(--neutral-100);
  --color-field-border: #8b94a3; /* ≥3:1 على الأبيض (WCAG 1.4.11) */
  --color-border: var(--color-hairline);
  --color-border-strong: var(--neutral-300);
  /* تعبئة محايدة هادئة (مقابض، مقاطع segmented، أزرار ثانوية على سطح أبيض). */
  --color-fill: var(--neutral-100);

  /* ---------- Colors: Semantic ----------
     ألوان الحالة ثابتة ودلالية (أخضر/كهرماني/أحمر/أزرق) ومستقلة عن لوحة المركز: لا تتغير بتغيير ألوان العلامة،
     فيبقى «مرفوض» أحمر و«نجاح» أخضر في كل مركز. *-strong لون النص فوق *-soft (≥4.5:1). */
  --color-success: #1f9d62;
  --color-success-soft: color-mix(in srgb, var(--color-success) 12%, #fff);
  --color-success-strong: color-mix(in srgb, var(--color-success) 58%, #000);
  --color-success-solid: color-mix(in srgb, var(--color-success) 80%, #000); /* خلفية ممتلئة بنص أبيض ≥4.5:1 */
  --color-warning: #d9900a;
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 14%, #fff);
  --color-warning-strong: color-mix(in srgb, var(--color-warning) 52%, #000);
  --color-danger: #d1383b;
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 9%, #fff);
  --color-danger-strong: color-mix(in srgb, var(--color-danger) 80%, #000);
  --color-danger-hover: color-mix(in srgb, var(--color-danger) 82%, #000);
  --color-danger-tint: color-mix(in srgb, var(--color-danger) 18%, #fff);
  --color-danger-line: color-mix(in srgb, var(--color-danger) 30%, #fff);
  --color-info: #2f6fd0;
  --color-info-soft: color-mix(in srgb, var(--color-info) 10%, #fff);
  --color-info-strong: color-mix(in srgb, var(--color-info) 72%, #000);
  --color-muted-soft: var(--neutral-100);
  --color-overlay: color-mix(in srgb, var(--neutral-900) 42%, transparent);


  /* ---------- Reference UI layer (ui.css) ----------
     كلها مشتقة من اللوحات الأربع؛ لا ألوان ثابتة. */
  --color-sage-soft: color-mix(in srgb, var(--palette-forest-light) 11%, #fff);
  --color-sage-line: color-mix(in srgb, var(--palette-forest-light) 24%, #fff);
  --color-sage-strong: color-mix(in srgb, var(--palette-forest-mid) 92%, #000);
  --color-gold-tile: color-mix(in srgb, var(--palette-wheat-mid) 20%, #fff);
  --color-gold-line: color-mix(in srgb, var(--palette-wheat-mid) 40%, #fff);
  --color-gold-strong: color-mix(in srgb, var(--palette-wheat-dark) 74%, #000);
  /* لافتة الرئيسية وأسطح التمييز: درجة باردة خفيفة مائلة لون العلامة (لا تُشتق من القمح/البيج). */
  --color-hero-from: color-mix(in srgb, var(--color-primary) 5%, #f3f8ff);
  --color-hero-to: color-mix(in srgb, var(--color-primary) 14%, #dce9fa);
  --color-hero-art: color-mix(in srgb, var(--color-primary) 52%, #9db3d3);
  --color-hero-bg: #E4EDF8; /* لافتة الرئيسية: أزرق رمادي مصمت (لا تدرّج) */
  --color-hero-ink: var(--palette-forest-mid);
  --color-surface-warm: var(--neutral-25);


  /* ---------- Soft accents (توجيه لوني دلالي) — docs/product-ux-reset.md §اللون ----------
     اللون معلَم للفهم لا زخرفة: يظهر في حاوية أيقونة أو وسم صغير أو قسم، ولا يصير خلفية صفحة.
     لكل ميدان أربع قيم: base (رسوم وأشرطة) · soft (تلوين خفيف) · ink (نص وأيقونات ≥4.5:1 على soft/الأبيض/الخلفية) · line (حد خفيف).
     منفصلة تمامًا عن ألوان الحالة (success/warning/danger/info): «مرفوض» يبقى دلاليًا في أي ميدان.
     المكوّن العام لا يعرف الميدان: الصفحة تضع data-accent="…" فيقرأ المكوّن --tint-* (تُعرَّف في ui.css). */
  --accent-students-base: #2563A9;
  --accent-groups-base: #6C4BB5;
  --accent-attendance-base: #147D74;
  --accent-registration-base: #B74B3E;
  --accent-achievements-base: #A56D08;
  --accent-habits-base: #18855B;
  --accent-performance-base: #4650B4;
  --accent-reports-base: #17788F;
  --accent-settings-base: #475569;

  --accent-students: var(--accent-students-base);
  --accent-students-soft: #E3EEFF;
  --accent-students-ink: #2563A9;
  --accent-students-line: #C3D8F6;

  --accent-groups: var(--accent-groups-base);
  --accent-groups-soft: #ECE6FA;
  --accent-groups-ink: #6C4BB5;
  --accent-groups-line: #D5CAF0;

  --accent-attendance: var(--accent-attendance-base);
  --accent-attendance-soft: #DDF3EF;
  --accent-attendance-ink: #147D74;
  --accent-attendance-line: #B9E3DC;

  --accent-registration: var(--accent-registration-base);
  --accent-registration-soft: #FBE3DF;
  --accent-registration-ink: #B74B3E;
  --accent-registration-line: #F0C2BB;

  --accent-achievements: var(--accent-achievements-base);
  --accent-achievements-soft: #FAEDCD;
  --accent-achievements-ink: #A56D08;
  --accent-achievements-line: #E9D49A;

  --accent-habits: var(--accent-habits-base);
  --accent-habits-soft: #DFF3E8;
  --accent-habits-ink: #18855B;
  --accent-habits-line: #BADFCB;

  --accent-performance: var(--accent-performance-base);
  --accent-performance-soft: #E6E9FB;
  --accent-performance-ink: #4650B4;
  --accent-performance-line: #CBD0F3;

  --accent-reports: var(--accent-reports-base);
  --accent-reports-soft: #DCF1F7;
  --accent-reports-ink: #17788F;
  --accent-reports-line: #B6DDE8;

  --accent-settings: var(--accent-settings-base);
  --accent-settings-soft: #E8ECF2;
  --accent-settings-ink: #475569;
  --accent-settings-line: #D0D7E1;

  /* ---------- Named accent families (توحيد الأسماء: الأزرق/البنفسجي/الفيروزي/الأخضر/العنبري/المرجاني) ----------
     أسماء لونية فقط فوق ألوان الوحدات أعلاه (مصدر واحد): القوالب تفضّل data-accent، وهذه للمكوّنات التي تحتاج لونًا مسمّى. */
  --accent-blue: var(--accent-students);
  --accent-blue-soft: var(--accent-students-soft);
  --accent-blue-ink: var(--accent-students-ink);
  --accent-violet: var(--accent-groups);
  --accent-violet-soft: var(--accent-groups-soft);
  --accent-violet-ink: var(--accent-groups-ink);
  --accent-teal: var(--accent-attendance);
  --accent-teal-soft: var(--accent-attendance-soft);
  --accent-teal-ink: var(--accent-attendance-ink);
  --accent-green: var(--accent-habits);
  --accent-green-soft: var(--accent-habits-soft);
  --accent-green-ink: var(--accent-habits-ink);
  --accent-amber: var(--accent-achievements);
  --accent-amber-soft: var(--accent-achievements-soft);
  --accent-amber-ink: var(--accent-achievements-ink);
  --accent-coral: var(--accent-registration);
  --accent-coral-soft: var(--accent-registration-soft);
  --accent-coral-ink: var(--accent-registration-ink);

  --radius-card: 12px;      /* بطاقات وصفوف الكيانات */
  --radius-tile: 12px;      /* مربعات المقاييس */
  --radius-hero: 14px;      /* لافتة الرئيسية */
  /* الأسطح: Canvas (--color-bg) · Surface (أبيض بحافة خفيفة + ظل ناعم جدًا) · Floating (ظل أوضح: قوائم، أوراق، حفظ ثابت).
     --shadow-card هو الرفع الخفيف للوحات الرئيسية (docs/ui-design-system.md §«ثراء بصري مضبوط»): لا ظل زجاجي عائم. */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--neutral-900) 5%, transparent), 0 8px 20px -14px color-mix(in srgb, var(--neutral-900) 16%, transparent);

  /* ---------- Typography ---------- */
  --font-family: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;

  --font-size-xs: 0.75rem;    /* 12px — captions/meta */
  --font-size-sm: 0.875rem;   /* 14px — supporting text, labels */
  --font-size-md: 1rem;       /* 16px — body, row titles, inputs (≥16 يمنع تكبير iOS عند التركيز) */
  --font-size-lg: 1.125rem;   /* 18px — section titles */
  --font-size-xl: 1.5rem;     /* 24px — page titles */
  --font-size-2xl: 1.875rem;  /* 30px — metric numbers */
  --font-size-meta: 0.8125rem; /* 13px — meta lines, pills, tile labels (بين xs وsm) */
  --font-size-hero: 1.75rem;   /* 28px — عنوان .hero (سياق الكيان) */
  --font-size-hero-compact: 1.625rem; /* 26px — .hero--compact (مراكز وقوائم جذرية) وأرقام .tile */

  /* الأوزان الأربعة كلها محمّلة فعلًا من Google Fonts (400/500/600/700) — لا وزن مصطنع. */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* العربية تحتاج ارتفاع سطر أكبر من اللاتينية (التشكيل والنقاط العلوية/السفلية). */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.85;

  /* ---------- Spacing scale (single source — do not invent ad-hoc values) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---------- Radius ----------
     القيم القديمة (sm/md/lg/xl) تبقى كما هي لأن landing.css يستعملها.
     التطبيق يستعمل الأدوار الدلالية أدناه: كل نوع عنصر له شخصية مختلفة. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* سلّم الحواف المعتمد (لا قيم حرفية في CSS): chip 8 · control 10 · tile/card 12 · sheet 16 · pill (دوائر وحبوب صغيرة فقط).
     --radius-tile/--radius-card معرَّفان أعلاه؛ --radius-surface اسم قديم لـ tile (يبقى للتوافق). */
  --radius-chip: 8px;       /* صغائر (نجمة، مؤشر) */
  --radius-control: 10px;   /* أزرار وحقول */
  --radius-surface: var(--radius-tile);   /* اسم قديم: مجموعات وبطاقات النماذج */
  --radius-sheet: 16px;     /* الحافة العليا للورقة السفلية/الشريط السفلي، و.hero/.identity */

  /* ---------- Shadows (شبه غير محسوسة — الفصل بالسطح لا بالظل) ---------- */
  --shadow-xs: 0 1px 1px color-mix(in srgb, var(--palette-charcoal-dark) 4%, transparent);
  --shadow-sm: 0 2px 8px -2px color-mix(in srgb, var(--palette-charcoal-dark) 8%, transparent);
  --shadow-md: 0 -6px 28px -10px color-mix(in srgb, var(--palette-charcoal-dark) 22%, transparent);
  --shadow-float: 0 10px 30px -12px color-mix(in srgb, var(--palette-charcoal-dark) 28%, transparent);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-sheet: 240ms var(--ease-out);  /* دخول الورقة السفلية (المزيد، التأكيد) */

  /* ---------- Touch targets ---------- */
  --touch-target-min: 44px;
  --control-height: 48px;

  /* ---------- App shell dimensions ---------- */
  --gutter: 16px;
  --topbar-height: 56px;
  --brandbar-height: 68px;
  --bottomnav-height: 66px;

  /* ---------- Safe areas (notch/home-indicator devices) ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Icon ---------- */
  --icon-size: 22px;
  --icon-stroke: 1.85;

  /* ---------- Container widths (by content type — see components.css .container--*) ---------- */
  --container-reading: 640px;   /* forms, focused single-task flows */
  --container-app: 720px;       /* guardian portal, general app pages */
  --container-dashboard: 1180px;
  --container-admin: 1180px;    /* admin lists/tables at desktop width */
}

/*
  ---------- Breakpoint reference (documentation only — no CSS vars for
  media queries, since CSS custom properties can't be used inside @media).
  Use these exact values everywhere; do not introduce new ones.

  Base    : 0–479px   (default, mobile)
  Small   : 480px+
  Tablet  : 768px+
  Desktop : 1024px+
  Wide    : 1280px+
*/

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