/* مولّد آليًا من brand/tokens.json — لا تعدّله يدويًا. عدّل المصدر ثم: npm run tokens */

:root {
  /* ── الأوّليات ── */
  --pt-color-ink-50: #F0F0F7;
  --pt-color-ink-100: #D8D7EA;
  --pt-color-ink-200: #B4B2D6;
  --pt-color-ink-300: #9290C2;
  --pt-color-ink-400: #7175A9;
  --pt-color-ink-500: #535D91;
  --pt-color-ink-600: #333A72;
  --pt-color-ink-700: #221E54;
  --pt-color-ink-800: #151C3F;
  --pt-color-ink-900: #0D142B;
  --pt-color-ink-950: #05091A;
  --pt-color-violet-50: #F4F3FC;
  --pt-color-violet-100: #E8E6F8;
  --pt-color-violet-200: #CFCCF1;
  --pt-color-violet-300: #ADA9E8;
  --pt-color-violet-400: #8F89DC;
  --pt-color-violet-500: #7168C9;
  --pt-color-violet-600: #5B54A8;
  --pt-color-violet-700: #474184;
  --pt-color-violet-800: #343061;
  --pt-color-violet-900: #232041;
  --pt-color-violet-950: #141225;
  --pt-color-neutral-0: #FFFFFF;
  --pt-color-neutral-50: #F7F8FA;
  --pt-color-neutral-100: #EEF0F4;
  --pt-color-neutral-200: #DDE0E8;
  --pt-color-neutral-300: #C2C7D3;
  --pt-color-neutral-400: #9AA1B2;
  --pt-color-neutral-500: #767E92;
  --pt-color-neutral-600: #5A6172;
  --pt-color-neutral-700: #434959;
  --pt-color-neutral-800: #2E3341;
  --pt-color-neutral-900: #1C202B;
  --pt-color-neutral-950: #0F1219;
  --pt-color-success-300: #8CCBA4;
  --pt-color-success-400: #6FB88A;
  --pt-color-success-500: #4E9A6B;
  --pt-color-success-600: #3C7D55;
  --pt-color-success-700: #2E6142;
  --pt-color-warning-300: #EAC77E;
  --pt-color-warning-400: #DDAE55;
  --pt-color-warning-500: #B0842A;
  --pt-color-warning-600: #8A5F16;
  --pt-color-warning-700: #6B4910;
  --pt-color-danger-300: #DB9A9A;
  --pt-color-danger-400: #C97070;
  --pt-color-danger-500: #B04A4A;
  --pt-color-danger-600: #8F3838;
  --pt-color-danger-700: #6E2A2A;
  --pt-color-info-300: #A3BAD6;
  --pt-color-info-400: #7E9CC2;
  --pt-color-info-500: #5B7BA6;
  --pt-color-info-600: #476388;
  --pt-color-info-700: #364C69;
  --pt-radius-none: 0;
  --pt-radius-xs: 2px;
  --pt-radius-sm: 4px;
  --pt-radius-md: 6px;
  --pt-radius-lg: 8px;
  --pt-radius-xl: 12px;
  --pt-radius-2xl: 16px;
  --pt-radius-3xl: 24px;
  --pt-radius-4xl: 32px;
  --pt-radius-full: 9999px;
  --pt-shadow-1: 0 1px 2px rgba(5,9,26,0.16);
  --pt-shadow-2: 0 2px 4px rgba(5,9,26,0.18);
  --pt-shadow-3: 0 3px 8px rgba(5,9,26,0.22);
  --pt-shadow-4: 0 4px 16px rgba(5,9,26,0.26);
  --pt-shadow-5: 0 12px 32px rgba(5,9,26,0.34);
  --pt-shadow-inset: inset 0 1px 2px rgba(5,9,26,0.20);
  --pt-shadow-accent: 0 2px 12px rgba(173,169,232,0.22);
  --pt-space-0: 0;
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 20px;
  --pt-space-6: 24px;
  --pt-space-7: 28px;
  --pt-space-8: 32px;
  --pt-space-10: 40px;
  --pt-space-12: 48px;
  --pt-space-16: 64px;
  --pt-space-20: 80px;
  --pt-space-24: 96px;
  --pt-space-32: 128px;
  --pt-font-family-ar: "Cairo", system-ui, sans-serif;
  --pt-font-family-en: "IBM Plex Sans", system-ui, sans-serif;
  --pt-font-family-display: "League Spartan", "IBM Plex Sans", sans-serif;
  --pt-font-family-mono: "Cascadia Code", Consolas, "Courier New", monospace;
  --pt-font-weight-light: 300;
  --pt-font-weight-regular: 400;
  --pt-font-weight-medium: 500;
  --pt-font-weight-semibold: 600;
  --pt-font-weight-bold: 700;
  --pt-font-weight-extrabold: 800;
  --pt-font-size-xs: 12px;
  --pt-font-size-sm: 13px;
  --pt-font-size-base: 15px;
  --pt-font-size-md: 16px;
  --pt-font-size-lg: 18px;
  --pt-font-size-xl: 20px;
  --pt-font-size-2xl: 24px;
  --pt-font-size-3xl: 30px;
  --pt-font-size-4xl: 38px;
  --pt-font-size-5xl: 48px;
  --pt-font-size-6xl: 60px;
  --pt-font-size-7xl: 76px;
  --pt-font-arabic-scale-size-factor: 1.06;
  --pt-font-arabic-scale-line-height-bonus: 0.18;
  --pt-font-arabic-scale-letter-spacing: 0;
  --pt-font-line-height-tight: 1.15;
  --pt-font-line-height-snug: 1.3;
  --pt-font-line-height-normal: 1.55;
  --pt-font-line-height-relaxed: 1.75;
  --pt-font-line-height-loose: 2;
  --pt-font-letter-spacing-tighter: -0.02em;
  --pt-font-letter-spacing-tight: -0.01em;
  --pt-font-letter-spacing-normal: 0;
  --pt-font-letter-spacing-wide: 0.02em;
  --pt-font-letter-spacing-wider: 0.06em;
  --pt-motion-duration-instant: 80ms;
  --pt-motion-duration-fast: 140ms;
  --pt-motion-duration-base: 220ms;
  --pt-motion-duration-slow: 320ms;
  --pt-motion-duration-slower: 480ms;
  --pt-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --pt-motion-easing-enter: cubic-bezier(0, 0, 0, 1);
  --pt-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  --pt-layout-container-sm: 640px;
  --pt-layout-container-md: 768px;
  --pt-layout-container-lg: 1024px;
  --pt-layout-container-xl: 1200px;
  --pt-layout-container-2xl: 1400px;
  --pt-layout-breakpoint-sm: 480px;
  --pt-layout-breakpoint-md: 768px;
  --pt-layout-breakpoint-lg: 1024px;
  --pt-layout-breakpoint-xl: 1280px;
  --pt-layout-breakpoint-2xl: 1536px;
  --pt-layout-z-base: 0;
  --pt-layout-z-dropdown: 100;
  --pt-layout-z-sticky: 200;
  --pt-layout-z-overlay: 300;
  --pt-layout-z-modal: 400;
  --pt-layout-z-toast: 500;
  --pt-layout-z-tooltip: 600;

  /* ── الأدوار الدلالية (الداكن هو الأصل) ── */
  --pt-bg-base: #05091A;
  --pt-bg-raised: #0D142B;
  --pt-bg-overlay: #151C3F;
  --pt-bg-inset: #05091A;
  --pt-surface: #151C3F;
  --pt-surface-hover: #221E54;
  --pt-border-subtle: #221E54;
  --pt-border-default: #333A72;
  --pt-border-strong: #7175A9;
  --pt-text-primary: #FFFFFF;
  --pt-text-secondary: #B4B2D6;
  --pt-text-muted: #9290C2;
  --pt-text-inverse: #05091A;
  --pt-accent: #ADA9E8;
  --pt-accent-hover: #CFCCF1;
  --pt-accent-muted: #343061;
  --pt-on-accent: #05091A;
  --pt-focus-ring: #ADA9E8;

  color-scheme: dark;
}

/* الوضع الفاتح — انعكاس كامل لكل الأدوار، لا جزئي */
:root[data-theme="light"] {
  --pt-bg-base: #F7F8FA;
  --pt-bg-raised: #FFFFFF;
  --pt-bg-overlay: #FFFFFF;
  --pt-bg-inset: #EEF0F4;
  --pt-surface: #FFFFFF;
  --pt-surface-hover: #EEF0F4;
  --pt-border-subtle: #DDE0E8;
  --pt-border-default: #C2C7D3;
  --pt-border-strong: #767E92;
  --pt-text-primary: #0D142B;
  --pt-text-secondary: #221E54;
  --pt-text-muted: #5A6172;
  --pt-text-inverse: #FFFFFF;
  --pt-accent: #5B54A8;
  --pt-accent-hover: #474184;
  --pt-accent-muted: #E8E6F8;
  --pt-on-accent: #FFFFFF;
  --pt-focus-ring: #5B54A8;
  color-scheme: light;
}

/* احترام تفضيل النظام حين لا يختار المستخدم صراحةً */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --pt-bg-base: #F7F8FA;
    --pt-bg-raised: #FFFFFF;
    --pt-bg-overlay: #FFFFFF;
    --pt-bg-inset: #EEF0F4;
    --pt-surface: #FFFFFF;
    --pt-surface-hover: #EEF0F4;
    --pt-border-subtle: #DDE0E8;
    --pt-border-default: #C2C7D3;
    --pt-border-strong: #767E92;
    --pt-text-primary: #0D142B;
    --pt-text-secondary: #221E54;
    --pt-text-muted: #5A6172;
    --pt-text-inverse: #FFFFFF;
    --pt-accent: #5B54A8;
    --pt-accent-hover: #474184;
    --pt-accent-muted: #E8E6F8;
    --pt-on-accent: #FFFFFF;
    --pt-focus-ring: #5B54A8;
    color-scheme: light;
  }
}

/* ── أساسيات اللغة والاتجاه ── */
html { font-family: var(--pt-font-body); }

/* ── المقياس العربي ──
   الحرف العربي أقصر بصريًا من اللاتيني: نفس القياس ينتج نصًا يبدو أصغر وأكثر ازدحامًا.
   لذلك يُعاد تعريف سلّم الأحجام كاملًا عند :lang(ar) بمعامل 1.06،
   ويُرفع ارتفاع السطر بمقدار 0.18. يطبَّق تلقائيًا على أي
   عنصر معلَّم بالعربية، حتى لو كانت لغة الصفحة إنجليزية. */
:lang(ar) {
  --pt-font-size-xs: 12.7px;
  --pt-font-size-sm: 13.8px;
  --pt-font-size-base: 15.9px;
  --pt-font-size-md: 17px;
  --pt-font-size-lg: 19.1px;
  --pt-font-size-xl: 21.2px;
  --pt-font-size-2xl: 25.4px;
  --pt-font-size-3xl: 31.8px;
  --pt-font-size-4xl: 40.3px;
  --pt-font-size-5xl: 50.9px;
  --pt-font-size-6xl: 63.6px;
  --pt-font-size-7xl: 80.6px;
  --pt-font-body: var(--pt-font-family-ar);
}

/* أي نص غير عربي يستعيد السلّم اللاتيني — يشمل كتلة إنجليزية داخل صفحة عربية */
:not(:lang(ar)) {
  --pt-font-size-xs: 12px;
  --pt-font-size-sm: 13px;
  --pt-font-size-base: 15px;
  --pt-font-size-md: 16px;
  --pt-font-size-lg: 18px;
  --pt-font-size-xl: 20px;
  --pt-font-size-2xl: 24px;
  --pt-font-size-3xl: 30px;
  --pt-font-size-4xl: 38px;
  --pt-font-size-5xl: 48px;
  --pt-font-size-6xl: 60px;
  --pt-font-size-7xl: 76px;
  --pt-font-body: var(--pt-font-family-en);
}

/* الخط وارتفاع السطر داخل :where() — أي قاعدة مكوّن تتغلّب عليهما.
   بدونها كانت قاعدة اللغة تهزم ارتفاع سطر العناوين وتفكّها. */
:where(:lang(ar)) {
  font-family: var(--pt-font-family-ar);
  line-height: calc(var(--pt-font-line-height-normal) + 0.18);
  letter-spacing: 0;
}
:where(:not(:lang(ar))) {
  font-family: var(--pt-font-family-en);
  line-height: var(--pt-font-line-height-normal);
}

/* العناوين العربية تحتاج زيادة أخف بكثير — النص الكبير لا يزدحم كالمتن */
:where(:lang(ar)) :is(h1, h2, h3, .display) {
  line-height: calc(var(--pt-font-line-height-tight) + 0.06);
}

/* حلقة التركيز موحّدة عبر النظام كله */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pt-focus-ring);
  outline-offset: 2px;
  border-radius: var(--pt-radius-md);
}

/* احترام تقليل الحركة */
@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;
  }
}