/* ===========================================================================
   روضة اللقاء — Design Tokens
   المصدر الوحيد للألوان والمسافات والخطوط. لا تكتب قيمة لونية خام في أي ملف آخر.
   =========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------
     أخضر زيتوني دافئ (هوية الروضة) + مشمشي للنداءات + سماوي هادئ للثانوي.
     كل درجة نصية مختبرة مقابل خلفيتها لتحقيق WCAG AA (4.5:1 للنص العادي). */
  --c-brand-50:  #f2f7f0;
  --c-brand-100: #e0ecdb;
  --c-brand-200: #c2d9b9;
  --c-brand-300: #9cc08d;
  --c-brand-400: #74a262;
  --c-brand-500: #558444;   /* 4.9:1 على الأبيض */
  --c-brand-600: #426a34;   /* 7.1:1 على الأبيض */
  --c-brand-700: #35542a;
  --c-brand-800: #2a4322;
  --c-brand-900: #1f321a;

  --c-accent-50:  #fff5ec;
  --c-accent-100: #ffe6d0;
  --c-accent-200: #ffcaa1;
  --c-accent-300: #ffa868;
  --c-accent-400: #f9873c;
  --c-accent-500: #e56a1c;
  --c-accent-600: #bc5313;   /* 4.6:1 على الأبيض */
  --c-accent-700: #94400f;

  --c-sky-50:  #eef6fb;
  --c-sky-100: #d6e9f5;
  --c-sky-200: #aed3ea;
  --c-sky-400: #5ba3ce;
  --c-sky-600: #2b6f99;

  /* --- Neutrals --------------------------------------------------------- */
  --c-ink-900: #1c1f1b;   /* نص أساسي */
  --c-ink-700: #3d423a;   /* نص ثانوي — 9.3:1 */
  --c-ink-500: #666d61;   /* نص خافت — 4.8:1، آمن للاستخدام */
  --c-ink-300: #a8ada3;   /* حدود وأيقونات فقط — لا نص */
  --c-ink-200: #d5d9d1;
  --c-ink-100: #e9ece6;
  --c-ink-50:  #f5f7f3;
  --c-white:   #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --c-success-bg: #e6f4ea; --c-success-fg: #1e6b34; --c-success-bd: #b6dfc3;
  --c-warning-bg: #fdf3e0; --c-warning-fg: #8a5a10; --c-warning-bd: #f1dcae;
  --c-danger-bg:  #fdeceb; --c-danger-fg:  #a32219; --c-danger-bd:  #f4c4c0;
  --c-info-bg:    #eaf3f9; --c-info-fg:    #205877; --c-info-bd:    #bcd9e9;

  /* --- Surfaces --------------------------------------------------------- */
  --surface:        var(--c-white);
  --surface-sunken: var(--c-ink-50);
  --surface-raised: var(--c-white);
  --border:         var(--c-ink-200);
  --border-strong:  var(--c-ink-300);
  --text:           var(--c-ink-900);
  --text-muted:     var(--c-ink-500);
  --text-inverse:   var(--c-white);

  /* --- Typography -------------------------------------------------------
     مقياس نسبي 1.2 (Minor Third) — مريح للعربية ولا يقفز بين الأحجام. */
  --font-body: 'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-head: 'Tajawal', 'Noto Kufi Arabic', system-ui, sans-serif;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.125rem;  /* 34 */
  --fs-3xl:  2.75rem;   /* 44 */

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-base:  1.75;   /* العربية تحتاج ارتفاع سطر أكبر من اللاتينية */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4: 1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 999px;

  /* --- Shadows (ناعمة ودافئة، بلون البراند لا رمادي ميت) ----------------- */
  --sh-xs: 0 1px 2px rgba(31, 50, 26, 0.06);
  --sh-sm: 0 2px 6px rgba(31, 50, 26, 0.07);
  --sh-md: 0 6px 18px rgba(31, 50, 26, 0.09);
  --sh-lg: 0 14px 34px rgba(31, 50, 26, 0.11);
  --sh-focus: 0 0 0 3px var(--c-brand-200);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 68px;
  --bottom-nav-h: 64px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
}

/* حركة مخفّضة — يُحترم إعداد النظام بالكامل */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}