/* ============================================================
   BarqNews Pro — 01 — CSS Variables & Color System
   ------------------------------------------------------------
   :root        — متغيرات عامة (مسافات، خطوط، انتقالات...)
   [data-theme] — يولّد ألوان الخلفية/النص/الحدود/الكرت
   ============================================================ */

:root {
  /* ---------- نظام الألوان (defaults قابلة للتغيير) ---------- */
  --site-color:        #c2410c;
  --site-color-rgb:    194, 65, 12;
  --site-color-darker-1: rgb(174, 58, 11);
  --site-color-darker-2: rgb(150, 50, 9);
  --site-color-darker-3: rgb(120, 40, 7);

  --breaking-color:    #dc3545;
  --breaking-color-rgb: 220, 53, 69;

  --success: #16a34a;
  --warning: #ca8a04;
  --danger:  #dc2626;

  /* ---------- نظام الخطوط ---------- */
  --site-font:        "Readex Pro", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --font-mono:        ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-size-base:   16px;
  --font-size-sm:     14px;
  --font-size-xs:     12px;
  --line-height-ar:   1.75;   /* للنصوص العربية */
  --line-height-tight:1.3;    /* للعناوين */

  /* ---------- نظام المسافات ---------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ---------- نظام الظلال ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ---------- نظام الانتقالات ---------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- أبعاد التخطيط ---------- */
  --header-height:        64px;
  --header-height-mobile: 56px;
  --content-width:        800px;
  --container-max:        1200px;
  --glob-gap:             50px;
  --glob-border-radius:   6px;
  --post-gap:             24px;
  --post-width:           300px;
  --post-column-width:    250px;

  /* ---------- خلفية الصفحة العامة ---------- */
  --body-bg-color:    #edeef3;
  --dark-bg-color:    #0f1117;
}

/* ============================================================
   الوضع الفاتح
   ============================================================ */
[data-theme^="light"] {
  --bg-color:        #f0f2f5;
  --card-bg:         #ffffff;
  --card-bg-rgb:     255, 255, 255;
  --light-bg:        #f6f7fa;
  --header-bg:       #ffffff;

  --text-color:      #1a1a2e;
  --text-secondary:  #4a4a6a;
  --text-muted:      #8a8aaa;
  --text-inverse:    #ffffff;

  --border-color:    rgba(0, 0, 0, 0.08);
  --border-strong:   rgba(0, 0, 0, 0.14);

  --header-shadow:   0 1px 0 rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --skeleton-from:   #ececf0;
  --skeleton-to:     #f6f7fa;

  color-scheme: light;
}

/* ============================================================
   الوضع الداكن
   ============================================================ */
[data-theme^="dark"] {
  --bg-color:        #0f1117;
  --card-bg:         #1a1d2e;
  --card-bg-rgb:     26, 29, 46;
  --light-bg:        #232638;
  --header-bg:       #12151f;

  --text-color:      #e8eaf0;
  --text-secondary:  #9da3b8;
  --text-muted:      #5c6480;
  --text-inverse:    #0f1117;

  --border-color:    rgba(255, 255, 255, 0.07);
  --border-strong:   rgba(255, 255, 255, 0.14);

  --header-shadow:   0 1px 0 rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
  --skeleton-from:   #1f2333;
  --skeleton-to:     #2a2f44;

  color-scheme: dark;
}

/* الافتراضي = light */
:root:not([data-theme]) {
  --bg-color:        #f0f2f5;
  --card-bg:         #ffffff;
  --card-bg-rgb:     255, 255, 255;
  --light-bg:        #f6f7fa;
  --header-bg:       #ffffff;
  --text-color:      #1a1a2e;
  --text-secondary:  #4a4a6a;
  --text-muted:      #8a8aaa;
  --text-inverse:    #ffffff;
  --border-color:    rgba(0, 0, 0, 0.08);
  --border-strong:   rgba(0, 0, 0, 0.14);
  --header-shadow:   0 1px 0 rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --skeleton-from:   #ececf0;
  --skeleton-to:     #f6f7fa;
}