/* ============================================================
   مودّة — Design Tokens (CSS Custom Properties)
   مولّد آليًا من tokens.json — لا تُحرّر يدويًا
   جميع التركيبات مختبرة وفق WCAG 2.2 AA
   ============================================================ */

:root {
  /* ---- الخط ---- */
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-feature-numeric: "tnum" 1, "lnum" 1;

  /* ---- مقاييس العلامة ---- */
  /* ليل مودّة — الثقة والخصوصية والخلفيات الليلية */
  --c-night-50: #EFF9FD;
  --c-night-100: #DFF0F7;
  --c-night-200: #C5E4F0;
  --c-night-300: #A8D4E5;
  --c-night-400: #89C1D6;
  --c-night-500: #68A9C0;
  --c-night-600: #4B8FA6;
  --c-night-700: #32748A;
  --c-night-800: #1E596C;
  --c-night-900: #103F4E;
  --c-night-950: #0D2F3A;
  /* وصال — العناصر التفاعلية والروابط والاتصال */
  --c-wisal-50: #EEF9F9;
  --c-wisal-100: #DEF2F1;
  --c-wisal-200: #C3E6E5;
  --c-wisal-300: #A4D8D7;
  --c-wisal-400: #84C5C4;
  --c-wisal-500: #62ADAD;
  --c-wisal-600: #449393;
  --c-wisal-700: #176B6B;
  --c-wisal-800: #135D5D;
  --c-wisal-900: #074242;
  --c-wisal-950: #002929;
  /* دفء — الخلفيات الإنسانية والبطاقات — والمقياس المحايد */
  --c-dafa-50: #FBF6EE;
  --c-dafa-100: #F3E9DA;
  --c-dafa-200: #E9DCCA;
  --c-dafa-300: #D7CAB6;
  --c-dafa-400: #C2B5A2;
  --c-dafa-500: #A89D8B;
  --c-dafa-600: #8D8373;
  --c-dafa-700: #72695C;
  --c-dafa-800: #575045;
  --c-dafa-900: #3E3830;
  --c-dafa-950: #26221C;
  /* قرب — الدعوات والترحيب والتفاصيل الإنسانية */
  --c-qurb-50: #FFF4F1;
  --c-qurb-100: #FFE6E1;
  --c-qurb-200: #FFD2C9;
  --c-qurb-300: #FFB8AA;
  --c-qurb-400: #F69C8B;
  --c-qurb-500: #E88472;
  --c-qurb-600: #C76352;
  --c-qurb-700: #A74A3A;
  --c-qurb-800: #843427;
  --c-qurb-900: #612218;
  --c-qurb-950: #3F110A;
  /* نور — نقطة الفهم والتوافق واللحظات المميزة */
  --c-noor-50: #FDF6E9;
  --c-noor-100: #F7ECD5;
  --c-noor-200: #EFDCB5;
  --c-noor-300: #E5C98E;
  --c-noor-400: #D8B56A;
  --c-noor-500: #BF983F;
  --c-noor-600: #A57E16;
  --c-noor-700: #876400;
  --c-noor-800: #684C00;
  --c-noor-900: #4A3600;
  --c-noor-950: #2E2000;
  /* نماء — وظيفي فقط — حالات النجاح في النظام */
  --c-nama-50: #EEFBF1;
  --c-nama-100: #DEF3E2;
  --c-nama-200: #C4E9CC;
  --c-nama-300: #A5DCB3;
  --c-nama-400: #85CA97;
  --c-nama-500: #63B37A;
  --c-nama-600: #459960;
  --c-nama-700: #2A7D48;
  --c-nama-800: #156133;
  --c-nama-900: #084522;
  --c-nama-950: #002B12;
  /* تنبيه — وظيفي فقط — حالات الخطأ */
  --c-tanbih-50: #FFF4F2;
  --c-tanbih-100: #FFE6E3;
  --c-tanbih-200: #FFD1CC;
  --c-tanbih-300: #FFB7B0;
  --c-tanbih-400: #FF958D;
  --c-tanbih-500: #ED756E;
  --c-tanbih-600: #D15853;
  --c-tanbih-700: #B03E3B;
  --c-tanbih-800: #8D2928;
  --c-tanbih-900: #671919;
  --c-tanbih-950: #440A0B;
  /* تحذير — وظيفي فقط — حالات التحذير */
  --c-tahdhir-50: #FFF5E8;
  --c-tahdhir-100: #FDEAD3;
  --c-tahdhir-200: #F9D8B1;
  --c-tahdhir-300: #F2C389;
  --c-tahdhir-400: #E5AB60;
  --c-tahdhir-500: #D08F32;
  --c-tahdhir-600: #B57500;
  --c-tahdhir-700: #925E00;
  --c-tahdhir-800: #704700;
  --c-tahdhir-900: #513200;
  --c-tahdhir-950: #331E00;
  --c-ink: #17343B; /* حبر */

  /* ---- المسافات ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- الاستدارة ---- */
  --radius-none: 0;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- الظلال ---- */
  --shadow-xs: 0 1px 2px rgba(13,47,58,.06);
  --shadow-sm: 0 2px 6px rgba(13,47,58,.08);
  --shadow-md: 0 6px 18px rgba(13,47,58,.10);
  --shadow-lg: 0 14px 40px rgba(13,47,58,.12);
  --shadow-xl: 0 24px 64px rgba(13,47,58,.16);
  --shadow-glow-noor: 0 0 0 1px rgba(216,181,106,.35), 0 0 28px rgba(216,181,106,.28);
  --shadow-glow-wisal: 0 0 0 1px rgba(23,107,107,.30), 0 0 24px rgba(23,107,107,.22);

  /* ---- الحركة ---- */
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
  --dur-calm: 720ms;
  --dur-breath: 4200ms;
  --dur-glow: 3200ms;
  --ease-standard: cubic-bezier(.32,.72,.28,1);
  --ease-enter: cubic-bezier(.16,.84,.44,1);
  --ease-exit: cubic-bezier(.5,0,.75,.4);
  --ease-breath: cubic-bezier(.45,0,.55,1);

  /* ---- الطباعة (Desktop) ---- */
  --t-display-size: 60px;  --t-display-weight: 600;  --t-display-lh: 1.24;  --t-display-ls: 0;
  --t-h1-size: 48px;  --t-h1-weight: 600;  --t-h1-lh: 1.28;  --t-h1-ls: 0;
  --t-h2-size: 38px;  --t-h2-weight: 600;  --t-h2-lh: 1.32;  --t-h2-ls: 0;
  --t-h3-size: 30px;  --t-h3-weight: 600;  --t-h3-lh: 1.38;  --t-h3-ls: 0;
  --t-h4-size: 24px;  --t-h4-weight: 600;  --t-h4-lh: 1.45;  --t-h4-ls: 0;
  --t-h5-size: 20px;  --t-h5-weight: 600;  --t-h5-lh: 1.5;  --t-h5-ls: 0;
  --t-h6-size: 18px;  --t-h6-weight: 600;  --t-h6-lh: 1.55;  --t-h6-ls: 0;
  --t-subtitle-size: 18px;  --t-subtitle-weight: 400;  --t-subtitle-lh: 1.7;  --t-subtitle-ls: 0;
  --t-body-lg-size: 18px;  --t-body-lg-weight: 400;  --t-body-lg-lh: 1.85;  --t-body-lg-ls: 0;
  --t-body-size: 16px;  --t-body-weight: 400;  --t-body-lh: 1.8;  --t-body-ls: 0;
  --t-body-sm-size: 14px;  --t-body-sm-weight: 400;  --t-body-sm-lh: 1.75;  --t-body-sm-ls: 0;
  --t-label-size: 14px;  --t-label-weight: 500;  --t-label-lh: 1.4;  --t-label-ls: 0;
  --t-button-size: 16px;  --t-button-weight: 600;  --t-button-lh: 1.2;  --t-button-ls: 0;
  --t-caption-size: 13px;  --t-caption-weight: 400;  --t-caption-lh: 1.6;  --t-caption-ls: 0;
  --t-helper-size: 13px;  --t-helper-weight: 400;  --t-helper-lh: 1.6;  --t-helper-ls: 0;
  --t-chat-size: 16px;  --t-chat-weight: 400;  --t-chat-lh: 1.85;  --t-chat-ls: 0;
  --t-numeric-size: 16px;  --t-numeric-weight: 500;  --t-numeric-lh: 1.4;  --t-numeric-ls: 0;
}

/* ---- الطباعة: Tablet ---- */
@media (max-width: 1024px) {
  :root {
    --t-display-size: 52px;
    --t-h1-size: 40px;
    --t-h2-size: 32px;
    --t-h3-size: 26px;
    --t-h4-size: 22px;
    --t-h5-size: 19px;
    --t-h6-size: 17px;
    --t-subtitle-size: 17px;
    --t-body-lg-size: 17px;
    --t-body-size: 16px;
    --t-body-sm-size: 14px;
    --t-label-size: 14px;
    --t-button-size: 16px;
    --t-caption-size: 13px;
    --t-helper-size: 13px;
    --t-chat-size: 16px;
    --t-numeric-size: 16px;
  }
}

/* ---- الطباعة: Mobile ---- */
@media (max-width: 768px) {
  :root {
    --t-display-size: 40px;
    --t-h1-size: 32px;
    --t-h2-size: 26px;
    --t-h3-size: 22px;
    --t-h4-size: 20px;
    --t-h5-size: 18px;
    --t-h6-size: 16px;
    --t-subtitle-size: 16px;
    --t-body-lg-size: 17px;
    --t-body-size: 16px;
    --t-body-sm-size: 14px;
    --t-label-size: 14px;
    --t-button-size: 16px;
    --t-caption-size: 12px;
    --t-helper-size: 13px;
    --t-chat-size: 16px;
    --t-numeric-size: 16px;
  }
}

/* ============ الوضع الفاتح (الافتراضي) ============ */
:root, [data-theme="light"] {
  --bg-canvas: #FBF6EE;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F3E9DA;
  --bg-muted: #E9DCCA;
  --bg-inverse: #0D2F3A;
  --text-primary: #17343B;
  --text-secondary: #575045;
  --text-muted: #72695C;
  --text-inverse: #FBF6EE;
  --text-link: #176B6B;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #17343B;
  --text-on-highlight: #17343B;
  --border-subtle: #E9DCCA;
  --border-default: #D7CAB6;
  --border-strong: #8D8373;
  --primary: #176B6B;
  --primary-hover: #135D5D;
  --primary-active: #074242;
  --primary-subtle: #EEF9F9;
  --primary-border: #C3E6E5;
  --accent: #E88472;
  --accent-hover: #F69C8B;
  --accent-subtle: #FFF4F1;
  --accent-text: #A74A3A;
  --highlight: #D8B56A;
  --highlight-subtle: #FDF6E9;
  --highlight-text: #876400;
  --success: #459960;
  --success-subtle: #EEFBF1;
  --success-text: #2A7D48;
  --warning: #B57500;
  --warning-subtle: #FFF5E8;
  --warning-text: #925E00;
  --error: #D15853;
  --error-subtle: #FFF4F2;
  --error-text: #B03E3B;
  --info: #32748A;
  --info-subtle: #EFF9FD;
  --info-text: #1E596C;
  --disabled-bg: #E9DCCA;
  --disabled-text: #8D8373;
  --disabled-border: #D7CAB6;
  --focus-ring: #176B6B;
  --focus-offset: #FBF6EE;
  --overlay: rgba(13,47,58,0.58);
  --skeleton: #E9DCCA;
  --skeleton-shine: #F3E9DA;
  --accent-active: #FFB8AA;
  --highlight-hover: #E5C98E;
  --highlight-active: #EFDCB5;
  color-scheme: light;
}

/* ============ الوضع الليلي ============ */
[data-theme="dark"] {
  --bg-canvas: #0D2F3A;
  --bg-surface: #103F4E;
  --bg-subtle: #1E596C;
  --bg-muted: #1E596C;
  --bg-inverse: #FBF6EE;
  --text-primary: #FBF6EE;
  --text-secondary: #D7CAB6;
  --text-muted: #C2B5A2;
  --text-inverse: #17343B;
  --text-link: #A4D8D7;
  --text-on-primary: #0D2F3A;
  --text-on-accent: #0D2F3A;
  --text-on-highlight: #0D2F3A;
  --border-subtle: #103F4E;
  --border-default: #1E596C;
  --border-strong: #4B8FA6;
  --primary: #84C5C4;
  --primary-hover: #A4D8D7;
  --primary-active: #C3E6E5;
  --primary-subtle: #002929;
  --primary-border: #135D5D;
  --accent: #FFB8AA;
  --accent-hover: #FFD2C9;
  --accent-subtle: #3F110A;
  --accent-text: #FFB8AA;
  --highlight: #E5C98E;
  --highlight-subtle: #2E2000;
  --highlight-text: #E5C98E;
  --success: #A5DCB3;
  --success-subtle: #002B12;
  --success-text: #A5DCB3;
  --warning: #F2C389;
  --warning-subtle: #331E00;
  --warning-text: #F2C389;
  --error: #FFB7B0;
  --error-subtle: #440A0B;
  --error-text: #FFB7B0;
  --info: #89C1D6;
  --info-subtle: #0D2F3A;
  --info-text: #A8D4E5;
  --disabled-bg: #1E596C;
  --disabled-text: #4B8FA6;
  --disabled-border: #1E596C;
  --focus-ring: #A4D8D7;
  --focus-offset: #0D2F3A;
  --overlay: rgba(4,16,21,0.70);
  --skeleton: #1E596C;
  --skeleton-shine: #103F4E;
  --accent-active: #FFE6E1;
  --highlight-hover: #EFDCB5;
  --highlight-active: #F7ECD5;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #0D2F3A;
    --bg-surface: #103F4E;
    --bg-subtle: #1E596C;
    --bg-muted: #1E596C;
    --bg-inverse: #FBF6EE;
    --text-primary: #FBF6EE;
    --text-secondary: #D7CAB6;
    --text-muted: #C2B5A2;
    --text-inverse: #17343B;
    --text-link: #A4D8D7;
    --text-on-primary: #0D2F3A;
    --text-on-accent: #0D2F3A;
    --text-on-highlight: #0D2F3A;
    --border-subtle: #103F4E;
    --border-default: #1E596C;
    --border-strong: #4B8FA6;
    --primary: #84C5C4;
    --primary-hover: #A4D8D7;
    --primary-active: #C3E6E5;
    --primary-subtle: #002929;
    --primary-border: #135D5D;
    --accent: #FFB8AA;
    --accent-hover: #FFD2C9;
    --accent-subtle: #3F110A;
    --accent-text: #FFB8AA;
    --highlight: #E5C98E;
    --highlight-subtle: #2E2000;
    --highlight-text: #E5C98E;
    --success: #A5DCB3;
    --success-subtle: #002B12;
    --success-text: #A5DCB3;
    --warning: #F2C389;
    --warning-subtle: #331E00;
    --warning-text: #F2C389;
    --error: #FFB7B0;
    --error-subtle: #440A0B;
    --error-text: #FFB7B0;
    --info: #89C1D6;
    --info-subtle: #0D2F3A;
    --info-text: #A8D4E5;
    --disabled-bg: #1E596C;
    --disabled-text: #4B8FA6;
    --disabled-border: #1E596C;
    --focus-ring: #A4D8D7;
    --focus-offset: #0D2F3A;
    --overlay: rgba(4,16,21,0.70);
    --skeleton: #1E596C;
    --skeleton-shine: #103F4E;
    --accent-active: #FFE6E1;
    --highlight-hover: #EFDCB5;
    --highlight-active: #F7ECD5;
    color-scheme: dark;
  }
}

/* ============ احترام تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-calm: 1ms;
    --dur-breath: 1ms;
    --dur-glow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}