/* =============================================================================
 * Arabdown Child — Design System (Neo-Noir Gaming Edition)
 * -----------------------------------------------------------------------------
 * v2.0.0 — استبدال شامل لـ palette السابقة (red/purple) بـ Neo-Noir gaming.
 *
 * المبادئ:
 *   • خلفية مطلقة #121414 + accent vibrant #90d960
 *   • depth عبر tonal layers + 1px borders (لا shadows)
 *   • Sharp/minimal — radius 0-4px
 *   • RTL-first مع Latin fallback عبر --ad-font-latin
 *   • CSS Cascade Layers — ترتيب نظيف بدون !important داخل الابن
 *
 * الأسماء الجديدة canonical (--ad-bg, --ad-primary، إلخ)، والقديمة
 * (--ad-color-bg, --ad-c-primary-500) محتفظ بها كـ aliases للتوافق
 * مع responsive.css و parent-fixes.css و components/* الموجودة.
 * ============================================================================= */


/* ============================================================
 *  CSS CASCADE LAYERS — DECLARATION (يجب أن يكون أوّل شيء)
 * ============================================================ */
@layer tokens, layout, components, page, responsive;


/* ============================================================
 *  ① ROOT TOKENS (Neo-Noir default)
 * ============================================================ */
@layer tokens {

:root,
:root[data-theme="dark"],
html.dark {
  /* ───────── Brand & Surfaces ───────── */
  --ad-bg:                  #121414;
  --ad-bg-alt:              #1a1c1c;
  --ad-surface:             #1e2020;
  --ad-surface-high:        #282a2b;
  --ad-surface-highest:     #333535;

  /* ───────── Text ───────── */
  --ad-text:                #e2e2e2;
  --ad-text-variant:        #c1cab5;
  --ad-text-muted:          #8b9481;
  --ad-text-on-primary:     #163800;

  /* ───────── Primary (vibrant green) ───────── */
  --ad-primary:             #90d960;
  --ad-primary-dim:         #6db33f;
  --ad-primary-fixed:       #abf779;
  --ad-on-primary:          #163800;

  /* ───────── Outlines & glows ───────── */
  --ad-outline:             #41493a;
  --ad-outline-strong:      #8b9481;
  --ad-glow:                rgba(144, 217, 96, 0.30);
  --ad-glow-strong:         rgba(144, 217, 96, 0.50);

  /* ───────── Category accents (للـ badges) ───────── */
  --ad-cat-games:           #90d960;
  --ad-cat-tech:            #60a5fa;
  --ad-cat-software:        #a78bfa;
  --ad-cat-movies:          #fb923c;
  --ad-cat-news:            #f87171;

  /* ───────── Status ───────── */
  --ad-success:             #4ade80;
  --ad-warning:             #fbbf24;
  --ad-danger:              #f87171;
  --ad-info:                #60a5fa;

  /* ───────── Typography Scale (Practical Editorial) ───────── */
  --ad-fs-meta:    0.875rem;                                      /* 14px */
  --ad-fs-label:   0.75rem;                                       /* 12px */
  --ad-fs-body:    clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);      /* 16-17px */
  --ad-fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);     /* 17-19px (article) */
  --ad-fs-h4:      clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);     /* 18-20px */
  --ad-fs-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20-24px */
  --ad-fs-h2:      clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24-32px */
  --ad-fs-h1:      clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem);       /* 28-40px */
  --ad-fs-hero:    clamp(2rem, 1.5rem + 2.5vw, 3.5rem);           /* 32-56px */

  /* ───────── Line heights مدروسة للعربية ───────── */
  --ad-lh-display: 1.25;
  --ad-lh-heading: 1.35;
  --ad-lh-body:    1.75;
  --ad-lh-tight:   1.5;

  /* ───────── Letter spacing (0 للعربي للحفاظ على ligatures) ───────── */
  --ad-tracking-tight:  0;
  --ad-tracking-normal: 0;
  --ad-tracking-wide:   0.05em;       /* للاتيني فقط (badges, uppercase) */

  /* ───────── 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 (RTL أساسي + Latin إضافي) ───────── */
  --ad-font-body:    "Readex Pro", "IBM Plex Sans Arabic", "Tajawal",
                     "Segoe UI", system-ui, sans-serif;
  --ad-font-display: "Readex Pro", "IBM Plex Sans Arabic", "Tajawal",
                     "Segoe UI", system-ui, sans-serif;
  --ad-font-latin:   "Space Grotesk", "Inter", system-ui, -apple-system,
                     "Segoe UI", sans-serif;
  --ad-font-mono:    "JetBrains Mono", "SF Mono", "Cascadia Code",
                     ui-monospace, Menlo, Consolas, monospace;

  /* ───────── Spacing (flat, practical) ───────── */
  --ad-space-1:  4px;
  --ad-space-2:  8px;
  --ad-space-3:  12px;
  --ad-space-4:  16px;        /* gutter mobile */
  --ad-space-5:  24px;        /* gutter desktop */
  --ad-space-6:  32px;
  --ad-space-7:  48px;
  --ad-space-8:  64px;        /* أقسام كبيرة */

  --ad-section-py:    clamp(2rem, 1.5rem + 1.5vw, 3.5rem);   /* 32-56px */
  --ad-container-px:  clamp(1rem, 0.5rem + 1.5vw, 2rem);     /* 16-32px */

  /* ───────── Layout ───────── */
  --ad-container:        1280px;
  --ad-container-wide:   1440px;
  --ad-content-max:      720px;
  --ad-grid-golden:      minmax(0, 1.618fr) minmax(0, 1fr);
  --ad-sidebar-min:      280px;

  /* Breakpoints (كقيم للمرجعية فقط — تستخدم في @media مباشرة) */
  --ad-bp-sm: 480px;
  --ad-bp-md: 768px;
  --ad-bp-lg: 1024px;
  --ad-bp-xl: 1440px;

  /* ───────── Radius (Neo-Noir = sharp/minimal) ───────── */
  --ad-radius-sharp: 0;
  --ad-radius-base:  4px;
  --ad-radius-md:    8px;
  --ad-radius-lg:    12px;
  --ad-radius-pill:  999px;

  /* ───────── Borders ───────── */
  --ad-border:           1px solid var(--ad-outline);
  --ad-border-strong:    1px solid var(--ad-outline-strong);
  --ad-border-glow:      1px solid var(--ad-glow);
  --ad-border-thin:      1px;
  --ad-border-base:      2px;
  --ad-border-thick:     4px;

  /* ───────── Motion ───────── */
  --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-dur-fast:    150ms;
  --ad-dur-base:    250ms;
  --ad-dur-slow:    400ms;

  /* ───────── Z-index ───────── */
  --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;

  /* ============================================================
   *  BACKWARD-COMPAT ALIASES (لـ B1/B2 components ولا تكسر CSS موجود)
   * ============================================================ */
  --ad-color-bg:           var(--ad-bg);
  --ad-color-bg-alt:       var(--ad-bg-alt);
  --ad-color-surface:      var(--ad-surface);
  --ad-color-surface-2:    var(--ad-surface-high);
  --ad-color-elevated:     var(--ad-surface-high);
  --ad-color-text:         var(--ad-text);
  --ad-color-text-on-dark: var(--ad-text);
  --ad-color-text-muted:   var(--ad-text-muted);
  --ad-color-text-variant: var(--ad-text-variant);
  --ad-color-link:         var(--ad-primary);
  --ad-color-border:       var(--ad-outline);
  --ad-color-border-strong:var(--ad-outline-strong);
  --ad-color-focus-ring:   var(--ad-glow-strong);

  /* Old primary scale aliases — استخدام داخلي قديم */
  --ad-c-primary-50:   var(--ad-primary-fixed);
  --ad-c-primary-100:  var(--ad-primary-fixed);
  --ad-c-primary-200:  var(--ad-primary-fixed);
  --ad-c-primary-300:  var(--ad-primary-fixed);
  --ad-c-primary-400:  var(--ad-primary);
  --ad-c-primary-500:  var(--ad-primary);
  --ad-c-primary-600:  var(--ad-primary-dim);
  --ad-c-primary-700:  var(--ad-primary-dim);
  --ad-c-primary-800:  var(--ad-primary-dim);
  --ad-c-primary-900:  var(--ad-primary-dim);

  --ad-c-accent-500:   var(--ad-cat-tech);
  --ad-c-accent-700:   var(--ad-cat-software);

  /* Spacing legacy — تستخدم في components/* ولا نريد كسرها */
  --ad-space-2xs:      var(--ad-space-1);
  --ad-space-xs:       var(--ad-space-2);
  --ad-space-sm:       var(--ad-space-3);
  --ad-space-md:       var(--ad-space-4);
  --ad-space-lg:       var(--ad-space-5);
  --ad-space-xl:       var(--ad-space-7);
  --ad-space-2xl:      var(--ad-space-8);
  --ad-space-3xl:      96px;
  --ad-space-fluid-md: clamp(0.75rem, 0.5rem + 1vw, 1rem);
  --ad-space-fluid-lg: clamp(1rem, 0.75rem + 1.5vw, 1.5rem);
  --ad-space-fluid-xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);

  /* Layout legacy aliases */
  --ad-wide-max:           var(--ad-container);
  --ad-full-max:           var(--ad-container-wide);
  --ad-grid-golden-ratio:  var(--ad-grid-golden);
  --ad-content-max-old:    var(--ad-content-max);

  /* Typography legacy (سُمّيت بهيراركي مختلف في B1) */
  --ad-fs--1:    var(--ad-fs-label);
  --ad-fs-0:     var(--ad-fs-body);
  --ad-fs-1:     var(--ad-fs-h4);
  --ad-fs-2:     var(--ad-fs-h3);
  --ad-fs-3:     var(--ad-fs-h2);
  --ad-fs-4:     var(--ad-fs-h1);

  --ad-lh-snug:    var(--ad-lh-heading);
  --ad-lh-normal:  var(--ad-lh-body);
  --ad-lh-relaxed: 1.85;

  /* Phi constants — keep for any module relying on them */
  --ad-phi:        1.618;
  --ad-phi-inv:    0.618;
}


/* ============================================================
 *  ② LIGHT MODE OVERRIDES (يبقى كـ option)
 * ============================================================ */
:root[data-theme="light"] {
  --ad-bg:                  #ffffff;
  --ad-bg-alt:              #f7f7f7;
  --ad-surface:             #ffffff;
  --ad-surface-high:        #f3f3f3;
  --ad-surface-highest:     #e5e5e5;

  --ad-text:                #1a1a1a;
  --ad-text-variant:        #404040;
  --ad-text-muted:          #6b7280;
  --ad-on-primary:          #ffffff;

  --ad-primary:             #2d7a14;
  --ad-primary-dim:         #1f5a08;
  --ad-primary-fixed:       #163800;

  --ad-outline:             #e5e7eb;
  --ad-outline-strong:      #6b7280;
  --ad-glow:                rgba(45, 122, 20, 0.20);
  --ad-glow-strong:         rgba(45, 122, 20, 0.40);
}


/* ============================================================
 *  ③ HIGH CONTRAST (a11y)
 * ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --ad-bg:           #000000;
    --ad-text:         #ffffff;
    --ad-primary:      #abf779;
    --ad-outline:      #ffffff;
  }
}

} /* end @layer tokens */


/* ============================================================
 *  ④ FONT FACES (UNLAYERED — @font-face داخل layer يُعامَل خارجها)
 * ============================================================ */

/* IBM Plex Sans Arabic — fallback عربي ثانوي */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBM-Plex-Sans-Arabic-Variable.woff2") format("woff2-variations"),
       url("../fonts/IBM-Plex-Sans-Arabic-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;
}

/* Tajawal — fallback عربي ثالث */
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/Tajawal-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/Tajawal-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0020-007F;
}

/* Readex Pro — اختياري، فعّله عند رفع الملف
   Google Fonts → https://fonts.google.com/specimen/Readex+Pro
   ضع ReadexPro-VariableFont_HEXP,wght.woff2 في assets/fonts/ */
/*
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/ReadexPro-VariableFont_HEXP,wght.woff2") format("woff2-variations"),
       url("../fonts/ReadexPro-VariableFont_HEXP,wght.woff2") format("woff2");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0020-007F;
}
*/

/* Space Grotesk — Latin إضافي (gaming/tech feel)
   Google Fonts → https://fonts.google.com/specimen/Space+Grotesk
   ضع SpaceGrotesk-VariableFont_wght.woff2 في assets/fonts/ */
/*
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007F;
}
*/


/* ============================================================
 *  ⑤ ACCESSIBILITY BASE
 * ============================================================ */
@layer layout {

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--ad-space-7);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@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;
  }
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ad-primary);
  outline-offset: 2px;
  border-radius: var(--ad-radius-base);
}

/* Touch targets للجوال */
@media (max-width: 768px) {
  :where(a, button)[role="button"],
  :where(a, button).button,
  :where(a, button).hp-badge {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}

} /* end @layer layout */


/* ============================================================
 *  ⑥ TYPOGRAPHY UTILITIES
 * ============================================================ */
@layer components {

.ad-step-meta  { font-size: var(--ad-fs-meta);    line-height: var(--ad-lh-tight); }
.ad-step-label { font-size: var(--ad-fs-label);   line-height: var(--ad-lh-tight); letter-spacing: var(--ad-tracking-wide); }
.ad-step-body  { font-size: var(--ad-fs-body);    line-height: var(--ad-lh-body); }
.ad-step-bodyl { font-size: var(--ad-fs-body-lg); line-height: var(--ad-lh-body); }
.ad-step-h4    { font-size: var(--ad-fs-h4);      line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-semibold); }
.ad-step-h3    { font-size: var(--ad-fs-h3);      line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-semibold); }
.ad-step-h2    { font-size: var(--ad-fs-h2);      line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-bold); }
.ad-step-h1    { font-size: var(--ad-fs-h1);      line-height: var(--ad-lh-display); font-weight: var(--ad-fw-bold); }
.ad-step-hero  { font-size: var(--ad-fs-hero);    line-height: var(--ad-lh-display); font-weight: var(--ad-fw-bold); }

/* Backward-compat: .ad-step-N (used by templates from B1) */
.ad-step--1   { font-size: var(--ad-fs-meta);     line-height: var(--ad-lh-tight); }
.ad-step-0    { font-size: var(--ad-fs-body);     line-height: var(--ad-lh-body); }
.ad-step-1    { font-size: var(--ad-fs-h4);       line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-semibold); }
.ad-step-2    { font-size: var(--ad-fs-h3);       line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-bold); }
.ad-step-3    { font-size: var(--ad-fs-h2);       line-height: var(--ad-lh-heading); font-weight: var(--ad-fw-bold); }
.ad-step-4    { font-size: var(--ad-fs-h1);       line-height: var(--ad-lh-display); font-weight: var(--ad-fw-bold); }

/* Family helpers */
.ad-font-body    { font-family: var(--ad-font-body); }
.ad-font-display { font-family: var(--ad-font-display); }
.ad-font-latin   { font-family: var(--ad-font-latin); letter-spacing: var(--ad-tracking-wide); }
.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); }

/* Text alignment (logical) */
.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; }

/* Container utility */
.ad-container {
  max-inline-size: var(--ad-container);
  margin-inline: auto;
  padding-inline: var(--ad-container-px);
  box-sizing: border-box;
}

/* Color helpers */
.ad-text-muted   { color: var(--ad-text-muted); }
.ad-text-variant { color: var(--ad-text-variant); }
.ad-text-primary { color: var(--ad-primary); }
.ad-bg-surface   { background: var(--ad-surface); }
.ad-bg-alt       { background: var(--ad-bg-alt); }

/* Visually-hidden (a11y) */
.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;
}

/* Stack helper */
.ad-stack > * + * { margin-block-start: var(--ad-space-4); }

} /* end @layer components */


/* ============================================================
 *  ⑦ PRINT
 * ============================================================ */
@media print {
  :root {
    --ad-bg:        #ffffff;
    --ad-text:      #000000;
    --ad-primary:   #000000;
    --ad-outline:   #000000;
  }
  html, body { background: #fff !important; color: #000 !important; }
  .ad-share-sticky,
  .arabdown-pro-push-prompt,
  .article-toc,
  nav, aside, footer { display: none !important; }
  a { text-decoration: underline; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}