/* ========================================================================
 * Arabdown Child — Golden Ratio Design System
 * ------------------------------------------------------------------------
 * نظام تصميم احترافي مبني على النسبة الذهبية (φ = 1.618).
 * مصمم لمحتوى عربي على RTL، يعمل جنباً إلى جنب مع القالب الأب
 * دون تعارض (يستخدم prefix --ad-* و .ad-* فقط).
 *
 * المبادئ:
 *   • Tokens فقط في :root — لا تطبيق إجباري على أي عنصر.
 *   • كل الـutilities مسبوقة بـ .ad- لتجنّب التعارض مع Bootstrap (.bs-)
 *     أو القالب الأب.
 *   • Dark mode عبر prefers-color-scheme + override بـ [data-theme].
 *   • OKLCH للألوان (إدراك بصري متّسق) مع fallback hex.
 *   • Logical properties (margin-inline, padding-block) للـRTL/LTR.
 *   • Variable fonts عند توفّرها.
 *
 * البنية:
 *   ① Root Tokens          — typography, spacing, colors, layout
 *   ② Dark Mode Tokens     — overrides عبر media + attribute
 *   ③ Font Faces           — IBM Plex Arabic, Tajawal (محليّة)
 *   ④ Accessibility Base   — focus, reduced-motion, touch targets
 *   ⑤ Typography Utils     — .ad-step-N
 *   ⑥ Spacing Utils        — .ad-p-*, .ad-m-*, .ad-gap-*
 *   ⑦ Layout Utils         — .ad-container, .ad-grid-golden, .ad-stack
 *   ⑧ Color Utils          — .ad-text-*, .ad-bg-*
 *   ⑨ Component Base       — .ad-card, .ad-btn, .ad-tag
 *   ⑩ Print
 * ====================================================================== */


/* ============================================================
 * ① ROOT TOKENS
 * ============================================================ */
:root {
  /* ---------- Golden Ratio Constants ---------- */
  --ad-phi: 1.618;
  --ad-phi-inv: 0.618;

  /* ---------- Typography Scale (φ-based) ----------
   * Base: 16px. Each step = previous × φ (with clamp() for fluid sizing).
   * step--2: ≈7px   • step--1: ≈10px • step-0: 16px
   * step-1: ≈26px   • step-2: ≈42px  • step-3: ≈68px • step-4: ≈110px
   */
  --ad-fs--2: clamp(0.4375rem, 0.42rem + 0.1vw, 0.5rem);   /* ~7-8px  */
  --ad-fs--1: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);   /* ~10-12px */
  --ad-fs-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* 16-18px */
  --ad-fs-1:  clamp(1.45rem, 1.3rem + 0.75vw, 1.75rem);    /* 23-28px */
  --ad-fs-2:  clamp(2rem, 1.6rem + 2vw, 2.625rem);         /* 32-42px */
  --ad-fs-3:  clamp(2.75rem, 2rem + 3.5vw, 4.25rem);       /* 44-68px */
  --ad-fs-4:  clamp(3.5rem, 2.5rem + 5vw, 6.875rem);       /* 56-110px */

  /* Line-heights — أكبر للنص العربي (مساحة للتشكيل والنقاط) */
  --ad-lh-tight:   1.2;   /* عناوين كبيرة */
  --ad-lh-snug:    1.4;   /* عناوين متوسطة */
  --ad-lh-normal:  1.7;   /* نص أساسي عربي */
  --ad-lh-relaxed: 1.9;   /* نص طويل/مقالات */

  /* Letter-spacing — مهم: 0 للعربي (السالب يكسر الـligatures) */
  --ad-tracking-tight:  0;
  --ad-tracking-normal: 0;
  --ad-tracking-wide:   0.02em;  /* فقط للنص اللاتيني */

  /* Font weights (تتوافق مع Variable Fonts) */
  --ad-fw-light:    300;
  --ad-fw-normal:   400;
  --ad-fw-medium:   500;
  --ad-fw-semibold: 600;
  --ad-fw-bold:     700;
  --ad-fw-extra:    800;

  /* Font families — تفضيل المحلي أولاً، ثم نظامي، ثم web font الأب */
  --ad-font-body:    "IBM Plex Sans Arabic", "Tajawal", "Readex Pro",
                     "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  --ad-font-display: "Readex Pro", "IBM Plex Sans Arabic", "Almarai",
                     "Segoe UI", Tahoma, system-ui, sans-serif;
  --ad-font-mono:    "JetBrains Mono", "SF Mono", "Cascadia Code",
                     "Source Code Pro", Menlo, Consolas, monospace;

  /* ---------- Spacing Scale (Fibonacci ≈ φ) ----------
   * 8 → 13 → 21 → 34 → 55 → 89 → 144 — كل قيمة ≈ السابقة × φ
   */
  --ad-space-3xs: 4px;    /* ½ من xs — للحدود الدقيقة */
  --ad-space-2xs: 6px;
  --ad-space-xs:  8px;
  --ad-space-sm:  13px;
  --ad-space-md:  21px;
  --ad-space-lg:  34px;
  --ad-space-xl:  55px;
  --ad-space-2xl: 89px;
  --ad-space-3xl: 144px;

  /* Spacing fluid (تتغير مع viewport — مفيد للأقسام الكبيرة) */
  --ad-space-fluid-md: clamp(0.875rem, 0.5rem + 1.5vw, 1.5rem);
  --ad-space-fluid-lg: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
  --ad-space-fluid-xl: clamp(2.5rem, 1.5rem + 5vw, 5rem);

  /* ---------- Layout / Grid ---------- */
  --ad-content-max:   720px;   /* عرض المقال الأمثل (≈65 حرف) */
  --ad-wide-max:      1200px;  /* الأقسام wide */
  --ad-full-max:      1440px;  /* الأقسام full قبل الكسر */
  --ad-sidebar-min:   280px;
  --ad-grid-golden-ratio: 1.618fr 1fr;   /* main : aside */

  /* Breakpoints (نفس Bootstrap 5 + القالب الأب — للمرجعية في @media) */
  --ad-bp-sm: 576px;
  --ad-bp-md: 768px;
  --ad-bp-lg: 992px;
  --ad-bp-xl: 1200px;
  --ad-bp-2xl: 1400px;

  /* ---------- Borders & Radius ---------- */
  --ad-border-thin:  1px;
  --ad-border-base:  2px;
  --ad-border-thick: 4px;

  --ad-radius-xs:    4px;
  --ad-radius-sm:    6px;
  --ad-radius-md:    10px;
  --ad-radius-lg:    16px;
  --ad-radius-xl:    24px;
  --ad-radius-pill:  999px;
  --ad-radius-full:  50%;

  /* ---------- Motion (cubic-bezier curves احترافية) ---------- */
  --ad-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ad-ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ad-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ad-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ad-dur-fast:    150ms;
  --ad-dur-base:    250ms;
  --ad-dur-slow:    400ms;
  --ad-dur-slower:  600ms;

  /* ---------- Z-index Layers ---------- */
  --ad-z-below:    -1;
  --ad-z-base:      0;
  --ad-z-dropdown:  100;
  --ad-z-sticky:    200;
  --ad-z-fixed:     300;
  --ad-z-modal-bg:  400;
  --ad-z-modal:     500;
  --ad-z-popover:   600;
  --ad-z-tooltip:   700;
  --ad-z-toast:     800;
  --ad-z-max:       999;

  /* ============================================================
   * COLORS — OKLCH (إدراك بصري دقيق) مع fallback hex
   * ============================================================
   * استخرجنا الألوان الأساسية من القالب الأب وبنينا حولها 9-shade scales.
   * استخدم --ad-color-* للقيم النهائية (semantic) و --ad-c-*-{50..900}
   * للوصول المباشر للدرجات.
   */

  /* Primary scale — أحمر القالب الأب #a70404 (للعناوين والـCTA المهم) */
  --ad-c-primary-50:  oklch(0.97 0.012 30);
  --ad-c-primary-100: oklch(0.93 0.030 30);
  --ad-c-primary-200: oklch(0.86 0.060 30);
  --ad-c-primary-300: oklch(0.76 0.100 30);
  --ad-c-primary-400: oklch(0.62 0.150 30);
  --ad-c-primary-500: oklch(0.52 0.180 30);   /* base ≈ #a70404 */
  --ad-c-primary-600: oklch(0.43 0.180 30);
  --ad-c-primary-700: oklch(0.35 0.150 30);
  --ad-c-primary-800: oklch(0.27 0.110 30);
  --ad-c-primary-900: oklch(0.19 0.075 30);

  /* Accent scale — بنفسجي #6A1768 (للروابط الثانوية والـtags) */
  --ad-c-accent-50:  oklch(0.96 0.015 320);
  --ad-c-accent-100: oklch(0.92 0.035 320);
  --ad-c-accent-200: oklch(0.83 0.075 320);
  --ad-c-accent-300: oklch(0.71 0.130 320);
  --ad-c-accent-400: oklch(0.55 0.180 320);
  --ad-c-accent-500: oklch(0.42 0.180 320);   /* base ≈ #6A1768 */
  --ad-c-accent-600: oklch(0.34 0.150 320);
  --ad-c-accent-700: oklch(0.27 0.115 320);
  --ad-c-accent-800: oklch(0.21 0.085 320);
  --ad-c-accent-900: oklch(0.15 0.055 320);

  /* Neutral scale — رمادي بحرارة طفيفة (مائل للأزرق الدافئ) */
  --ad-c-neutral-50:  oklch(0.985 0.002 250);  /* خلفية فاتحة جداً */
  --ad-c-neutral-100: oklch(0.965 0.003 250);
  --ad-c-neutral-200: oklch(0.92 0.005 250);
  --ad-c-neutral-300: oklch(0.85 0.008 250);
  --ad-c-neutral-400: oklch(0.70 0.012 250);
  --ad-c-neutral-500: oklch(0.55 0.015 250);   /* meta text */
  --ad-c-neutral-600: oklch(0.42 0.015 250);
  --ad-c-neutral-700: oklch(0.32 0.012 250);
  --ad-c-neutral-800: oklch(0.22 0.010 250);
  --ad-c-neutral-900: oklch(0.14 0.008 250);   /* النص الأساسي */

  /* Semantic / Status */
  --ad-c-success: oklch(0.62 0.150 145);  /* أخضر */
  --ad-c-warning: oklch(0.78 0.150 75);   /* كهرماني */
  --ad-c-danger:  oklch(0.55 0.200 25);   /* أحمر تحذير */
  --ad-c-info:    oklch(0.62 0.150 235);  /* أزرق #1877f2-ish */

  /* ============================================================
   *  Semantic tokens (Light Mode default) — استخدم هذه في كودك
   * ============================================================ */
  --ad-color-bg:           oklch(1 0 0);                       /* #FFFFFF */
  --ad-color-surface:      var(--ad-c-neutral-50);
  --ad-color-surface-2:    var(--ad-c-neutral-100);            /* أعمق قليلاً */
  --ad-color-elevated:     #ffffff;                            /* للبطاقات فوق الخلفية */

  --ad-color-text:         var(--ad-c-neutral-900);
  --ad-color-text-muted:   var(--ad-c-neutral-500);
  --ad-color-text-on-dark: var(--ad-c-neutral-50);

  --ad-color-border:       var(--ad-c-neutral-200);
  --ad-color-border-strong: var(--ad-c-neutral-300);

  --ad-color-link:         var(--ad-c-primary-500);
  --ad-color-link-hover:   var(--ad-c-primary-700);
  --ad-color-link-visited: var(--ad-c-accent-500);

  --ad-color-focus-ring:   oklch(0.62 0.20 250 / 0.55);

  /* Shadows — متدرّجة ومحترفة (Material-inspired, soft) */
  --ad-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.04);
  --ad-shadow-sm: 0 2px 4px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
  --ad-shadow-md: 0 4px 8px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.04);
  --ad-shadow-lg: 0 12px 24px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.04);
  --ad-shadow-xl: 0 24px 48px oklch(0 0 0 / 0.10), 0 8px 16px oklch(0 0 0 / 0.04);
  --ad-shadow-glow: 0 0 0 4px var(--ad-color-focus-ring);
}


/* ============================================================
 * ② DARK MODE TOKENS
 * ------------------------------------------------------------
 *  • افتراضياً يحترم تفضيل النظام (prefers-color-scheme: dark).
 *  • [data-theme="dark"] على <html> يفرض dark بصرف النظر.
 *  • [data-theme="light"] يفرض light.
 *  • [data-theme="hc"] = high contrast للوصولية.
 * ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="hc"]) {
    --ad-color-bg:            oklch(0.14 0.008 250);
    --ad-color-surface:       oklch(0.18 0.010 250);
    --ad-color-surface-2:     oklch(0.22 0.010 250);
    --ad-color-elevated:      oklch(0.22 0.012 250);

    --ad-color-text:          oklch(0.95 0.003 250);
    --ad-color-text-muted:    oklch(0.70 0.012 250);
    --ad-color-text-on-dark:  oklch(0.95 0.003 250);

    --ad-color-border:        oklch(0.28 0.012 250);
    --ad-color-border-strong: oklch(0.38 0.015 250);

    --ad-color-link:          var(--ad-c-primary-300);
    --ad-color-link-hover:    var(--ad-c-primary-200);
    --ad-color-link-visited:  var(--ad-c-accent-300);

    --ad-color-focus-ring:    oklch(0.78 0.18 250 / 0.65);

    --ad-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.30);
    --ad-shadow-sm: 0 2px 4px oklch(0 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.25);
    --ad-shadow-md: 0 4px 8px oklch(0 0 0 / 0.40), 0 2px 4px oklch(0 0 0 / 0.30);
    --ad-shadow-lg: 0 12px 24px oklch(0 0 0 / 0.45), 0 4px 8px oklch(0 0 0 / 0.30);
    --ad-shadow-xl: 0 24px 48px oklch(0 0 0 / 0.50), 0 8px 16px oklch(0 0 0 / 0.30);
  }
}

[data-theme="dark"] {
  --ad-color-bg:            oklch(0.14 0.008 250);
  --ad-color-surface:       oklch(0.18 0.010 250);
  --ad-color-surface-2:     oklch(0.22 0.010 250);
  --ad-color-elevated:      oklch(0.22 0.012 250);

  --ad-color-text:          oklch(0.95 0.003 250);
  --ad-color-text-muted:    oklch(0.70 0.012 250);
  --ad-color-text-on-dark:  oklch(0.95 0.003 250);

  --ad-color-border:        oklch(0.28 0.012 250);
  --ad-color-border-strong: oklch(0.38 0.015 250);

  --ad-color-link:          var(--ad-c-primary-300);
  --ad-color-link-hover:    var(--ad-c-primary-200);
  --ad-color-link-visited:  var(--ad-c-accent-300);

  --ad-color-focus-ring:    oklch(0.78 0.18 250 / 0.65);

  color-scheme: dark;
}

/* High Contrast — للوصولية: أبيض/أسود نقيّ مع contrast > 7:1 */
[data-theme="hc"] {
  --ad-color-bg:            #000000;
  --ad-color-surface:       #000000;
  --ad-color-surface-2:     #0a0a0a;
  --ad-color-elevated:      #111111;

  --ad-color-text:          #ffffff;
  --ad-color-text-muted:    #e0e0e0;
  --ad-color-text-on-dark:  #ffffff;

  --ad-color-border:        #ffffff;
  --ad-color-border-strong: #ffffff;

  --ad-color-link:          #ffeb00;
  --ad-color-link-hover:    #ffffff;
  --ad-color-link-visited:  #ff80ff;
  --ad-color-focus-ring:    #ffeb00;

  color-scheme: dark;
}

/* تفعيل HC تلقائياً عند طلب المتصفح زيادة التباين */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --ad-color-text:         #000000;
    --ad-color-text-muted:   #2a2a2a;
    --ad-color-border:       #000000;
    --ad-color-link:         #0000d4;
  }
}


/* ============================================================
 * ③ FONT FACES (محليّة — self-hosted)
 * ------------------------------------------------------------
 * ضع ملفات .woff2 في arabdown-child/assets/fonts/
 * Variable fonts موصى بها (حجم أصغر + كل الـweights في ملف واحد).
 *
 * مصادر التحميل (ضعها في الفهرس بنفس الأسماء):
 *   • IBM Plex Sans Arabic Variable
 *     https://github.com/IBM/plex
 *   • Tajawal (مصدر بديل/fallback)
 *     https://fonts.google.com/specimen/Tajawal
 *   • Readex Pro (يحمّله القالب الأب — غير مطلوب هنا إلا لـself-host)
 *
 * الـ@font-face معطّل افتراضياً — فعّله عند رفع الملفات.
 * ============================================================ */

/*
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Variable.woff2") format("woff2-variations"),
       url("../fonts/IBMPlexSansArabic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+0020-007F;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0020-007F;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0020-007F;
}
*/


/* ============================================================
 * ④ ACCESSIBILITY BASE
 * ============================================================ */

/* Smooth scroll + RTL-aware scroll padding */
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--ad-space-2xl);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Reduce motion — احترام تفضيل المستخدم */
@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;
  }
}

/* Focus visible — حلقة واضحة للـkeyboard فقط */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ad-color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--ad-radius-xs);
}

/* تعطيل التأشير الافتراضي القبيح للـclick */
:focus:not(:focus-visible) {
  outline: none;
}

/* Touch targets — الحد الأدنى 44×44px (WCAG 2.5.5) */
@media (pointer: coarse) {
  :where(a, button, [role="button"], input[type="button"], input[type="submit"]) {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}

/* Skip link للوصولية */
.ad-skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: var(--ad-space-xs);
  z-index: var(--ad-z-max);
  padding: var(--ad-space-sm) var(--ad-space-md);
  background: var(--ad-color-text);
  color: var(--ad-color-text-on-dark);
  border-radius: var(--ad-radius-sm);
  text-decoration: none;
}
.ad-skip-link:focus {
  inset-inline-start: var(--ad-space-xs);
}

/* Screen-reader only */
.ad-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
 * ⑤ TYPOGRAPHY UTILITIES
 * ============================================================ */
.ad-step--2 { font-size: var(--ad-fs--2); line-height: var(--ad-lh-snug); }
.ad-step--1 { font-size: var(--ad-fs--1); line-height: var(--ad-lh-snug); }
.ad-step-0  { font-size: var(--ad-fs-0);  line-height: var(--ad-lh-normal); }
.ad-step-1  { font-size: var(--ad-fs-1);  line-height: var(--ad-lh-snug); font-weight: var(--ad-fw-semibold); }
.ad-step-2  { font-size: var(--ad-fs-2);  line-height: var(--ad-lh-snug); font-weight: var(--ad-fw-bold); }
.ad-step-3  { font-size: var(--ad-fs-3);  line-height: var(--ad-lh-tight); font-weight: var(--ad-fw-bold); }
.ad-step-4  { font-size: var(--ad-fs-4);  line-height: var(--ad-lh-tight); font-weight: var(--ad-fw-extra); letter-spacing: -0.01em; }

/* Family helpers */
.ad-font-body    { font-family: var(--ad-font-body); }
.ad-font-display { font-family: var(--ad-font-display); }
.ad-font-mono    { font-family: var(--ad-font-mono); }

/* Weight helpers */
.ad-fw-light    { font-weight: var(--ad-fw-light); }
.ad-fw-normal   { font-weight: var(--ad-fw-normal); }
.ad-fw-medium   { font-weight: var(--ad-fw-medium); }
.ad-fw-semibold { font-weight: var(--ad-fw-semibold); }
.ad-fw-bold     { font-weight: var(--ad-fw-bold); }

/* Line-height helpers */
.ad-lh-tight   { line-height: var(--ad-lh-tight); }
.ad-lh-normal  { line-height: var(--ad-lh-normal); }
.ad-lh-relaxed { line-height: var(--ad-lh-relaxed); }

/* Text alignment (logical — يحترم RTL) */
.ad-text-start  { text-align: start; }
.ad-text-center { text-align: center; }
.ad-text-end    { text-align: end; }

/* Truncate — متعدد السطور */
.ad-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-clamp-2,
.ad-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ad-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ad-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }


/* ============================================================
 * ⑥ SPACING UTILITIES (logical properties)
 * ============================================================ */
.ad-p-xs  { padding: var(--ad-space-xs); }
.ad-p-sm  { padding: var(--ad-space-sm); }
.ad-p-md  { padding: var(--ad-space-md); }
.ad-p-lg  { padding: var(--ad-space-lg); }
.ad-p-xl  { padding: var(--ad-space-xl); }

.ad-px-md { padding-inline: var(--ad-space-md); }
.ad-px-lg { padding-inline: var(--ad-space-lg); }
.ad-py-md { padding-block: var(--ad-space-md); }
.ad-py-lg { padding-block: var(--ad-space-lg); }

.ad-m-0   { margin: 0; }
.ad-mt-md { margin-block-start: var(--ad-space-md); }
.ad-mt-lg { margin-block-start: var(--ad-space-lg); }
.ad-mb-md { margin-block-end: var(--ad-space-md); }
.ad-mb-lg { margin-block-end: var(--ad-space-lg); }

.ad-gap-xs { gap: var(--ad-space-xs); }
.ad-gap-sm { gap: var(--ad-space-sm); }
.ad-gap-md { gap: var(--ad-space-md); }
.ad-gap-lg { gap: var(--ad-space-lg); }
.ad-gap-xl { gap: var(--ad-space-xl); }


/* ============================================================
 * ⑦ LAYOUT UTILITIES
 * ============================================================ */

/* Container — مع padding ذكيّ يحترم safe-area على iPhone */
.ad-container {
  inline-size: 100%;
  max-inline-size: var(--ad-wide-max);
  margin-inline: auto;
  padding-inline: max(var(--ad-space-md), env(safe-area-inset-left));
}
.ad-container-narrow { max-inline-size: var(--ad-content-max); }
.ad-container-wide   { max-inline-size: var(--ad-full-max); }

/* Golden Ratio Grid — main : aside = 1.618 : 1 */
.ad-grid-golden {
  display: grid;
  grid-template-columns: var(--ad-grid-golden-ratio);
  gap: var(--ad-space-lg);
  align-items: start;
}
@media (max-width: 992px) {
  .ad-grid-golden {
    grid-template-columns: 1fr;
  }
}

/* Golden Ratio العكسي — للـsidebar على اليسار */
.ad-grid-golden-reverse {
  display: grid;
  grid-template-columns: 1fr 1.618fr;
  gap: var(--ad-space-lg);
  align-items: start;
}
@media (max-width: 992px) {
  .ad-grid-golden-reverse { grid-template-columns: 1fr; }
}

/* Stack — عمودي مع gap موحّد */
.ad-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ad-space-md);
}
.ad-stack-sm { gap: var(--ad-space-sm); }
.ad-stack-lg { gap: var(--ad-space-lg); }

/* Cluster — أفقي flex-wrap (مفيد للـtags والـbadges) */
.ad-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ad-space-sm);
}

/* Auto-fit grid — عدد الأعمدة يتكيّف تلقائياً */
.ad-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--ad-space-lg);
}
.ad-grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--ad-space-md);
}

/* Aspect ratios شائعة (للصور والفيديوهات) */
.ad-aspect-16-9  { aspect-ratio: 16 / 9; }
.ad-aspect-4-3   { aspect-ratio: 4 / 3; }
.ad-aspect-square{ aspect-ratio: 1 / 1; }
.ad-aspect-phi   { aspect-ratio: 1.618 / 1; }    /* النسبة الذهبية */


/* ============================================================
 * ⑧ COLOR UTILITIES
 * ============================================================ */
.ad-bg-default  { background-color: var(--ad-color-bg); }
.ad-bg-surface  { background-color: var(--ad-color-surface); }
.ad-bg-surface-2{ background-color: var(--ad-color-surface-2); }
.ad-bg-elevated { background-color: var(--ad-color-elevated); }
.ad-bg-primary  { background-color: var(--ad-c-primary-500); color: var(--ad-color-text-on-dark); }
.ad-bg-accent   { background-color: var(--ad-c-accent-500);  color: var(--ad-color-text-on-dark); }

.ad-text         { color: var(--ad-color-text); }
.ad-text-muted   { color: var(--ad-color-text-muted); }
.ad-text-primary { color: var(--ad-c-primary-500); }
.ad-text-accent  { color: var(--ad-c-accent-500); }

.ad-border       { border: var(--ad-border-thin) solid var(--ad-color-border); }
.ad-border-strong{ border: var(--ad-border-thin) solid var(--ad-color-border-strong); }
.ad-border-block-end { border-block-end: var(--ad-border-thin) solid var(--ad-color-border); }


/* ============================================================
 * ⑨ COMPONENT BASE STYLES
 * ============================================================ */

/* Card — قاعدة لجميع الكروت */
.ad-card {
  background: var(--ad-color-elevated);
  border-radius: var(--ad-radius-md);
  padding: var(--ad-space-md);
  box-shadow: var(--ad-shadow-sm);
  transition: box-shadow var(--ad-dur-base) var(--ad-ease-out),
              transform var(--ad-dur-base) var(--ad-ease-out);
}
.ad-card:hover {
  box-shadow: var(--ad-shadow-lg);
  transform: translateY(-2px);
}

/* Button base */
.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ad-space-xs);
  padding: var(--ad-space-sm) var(--ad-space-md);
  border: var(--ad-border-thin) solid transparent;
  border-radius: var(--ad-radius-sm);
  background: var(--ad-color-surface-2);
  color: var(--ad-color-text);
  font: inherit;
  font-weight: var(--ad-fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ad-dur-fast) var(--ad-ease-out),
              transform var(--ad-dur-fast) var(--ad-ease-out);
  user-select: none;
}
.ad-btn:hover { background: var(--ad-color-border); }
.ad-btn:active { transform: scale(0.97); }
.ad-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ad-btn--primary {
  background: var(--ad-c-primary-500);
  color: var(--ad-color-text-on-dark);
  border-color: var(--ad-c-primary-500);
}
.ad-btn--primary:hover { background: var(--ad-c-primary-600); border-color: var(--ad-c-primary-600); }

.ad-btn--ghost {
  background: transparent;
  border-color: var(--ad-color-border-strong);
}
.ad-btn--ghost:hover { background: var(--ad-color-surface); }

/* Tag / Badge */
.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-space-3xs);
  padding: var(--ad-space-3xs) var(--ad-space-xs);
  font-size: var(--ad-fs--1);
  font-weight: var(--ad-fw-medium);
  border-radius: var(--ad-radius-pill);
  background: var(--ad-color-surface);
  color: var(--ad-color-text-muted);
  border: var(--ad-border-thin) solid var(--ad-color-border);
}
.ad-tag--primary { background: var(--ad-c-primary-50);  color: var(--ad-c-primary-700); border-color: var(--ad-c-primary-200); }
.ad-tag--accent  { background: var(--ad-c-accent-50);   color: var(--ad-c-accent-700);  border-color: var(--ad-c-accent-200); }
.ad-tag--success { background: oklch(0.95 0.05 145);    color: oklch(0.30 0.13 145); }
.ad-tag--warning { background: oklch(0.96 0.05 75);     color: oklch(0.40 0.13 75); }

/* Divider ذهبي */
.ad-divider {
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background: linear-gradient(
    to inline-end,
    transparent 0%,
    var(--ad-color-border) 38.2%,
    var(--ad-color-border) 61.8%,
    transparent 100%
  );
  border: 0;
  margin-block: var(--ad-space-lg);
}

/* Image cover (for cards) */
.ad-img-cover {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}


/* ============================================================
 * ⑩ PRINT STYLES
 * ============================================================ */
@media print {
  :root {
    --ad-color-bg: #ffffff;
    --ad-color-text: #000000;
  }
  .ad-no-print,
  nav,
  aside,
  footer,
  .ads,
  iframe { display: none !important; }
  .ad-card { box-shadow: none; border: 1px solid #ccc; }
  a { text-decoration: underline; color: inherit; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  body { font-size: 12pt; line-height: 1.5; }
}