/* Centralized Theme System */
/* Base mapping: expose a unified set used by public pages, and map CMS variables to them */
:root{
  /* defaults (Sky Dark) */
  --background:#0f0f23; --foreground:#e2e8f0;
  --card:#1e1e3f; --card-foreground:#f1f5f9;
  --popover:#1e1e3f; --popover-foreground:#f1f5f9;
  --primary:#3b82f6; --primary-foreground:#ffffff;
  --secondary:#1e293b; --secondary-foreground:#f1f5f9;
  --accent:#06b6d4; --accent-foreground:#ffffff;
  --border:rgba(148,163,184,.2); --input:rgba(148,163,184,.1);
  --nav-bg:#0f172a; --nav-foreground:#e5e7eb;
  --nav-link-bg: rgba(17,19,24,.55);
  --nav-link-hover-bg: rgba(17,19,24,.75);
  --nav-link-active-bg: var(--primary);
  --btn-bg: var(--primary); --btn-fg: var(--primary-foreground);
  --ticker-bg: var(--secondary); --ticker-fg: var(--foreground);
  --ctrl-bg: var(--nav-link-bg);
  --ctrl-fg: var(--foreground);
  --ctrl-border: var(--border);
  --banner-dot: rgba(255,255,255,.45);
  --banner-dot-active: var(--primary);
  --background-2: color-mix(in oklab, var(--accent) 35%, transparent);
  /* Ticker overrides (fallback to secondary) */
  --ticker-bg: var(--secondary);
  --ticker-fg: var(--foreground);
  --ads-bg:#0b1222; --ads-foreground:#e6f3ff;

  /* Map CMS variables to the global set */
  --bg: var(--background);
  --fg: var(--foreground);
  --card-2: color-mix(in oklab, var(--card) 85%, black 15%);
  --primary-2: color-mix(in oklab, var(--primary) 70%, white 30%);
  --sidebar: color-mix(in oklab, var(--nav-bg) 92%, black 8%);
  --topbar: var(--nav-bg);
  --hover: color-mix(in oklab, var(--foreground) 5%, transparent);
}

/* Palettes using higher specificity to override in all pages */
:root[data-theme="sky"]{
  --background:#0f0f23; --foreground:#f1f5f9;
  --card:#1e1e3f; --card-foreground:#ffffff;
  --popover:#1e1e3f; --popover-foreground:#ffffff;
  --primary:#3b82f6; --primary-foreground:#ffffff;
  --secondary:#1e293b; --secondary-foreground:#ffffff;
  --accent:#06b6d4; --accent-foreground:#ffffff;
  --border:rgba(148,163,184,.2); --input:rgba(148,163,184,.1);
  --ring:#3b82f6;
  --nav-bg:#0f172a; --nav-foreground:#f8fafc;
  --nav-link-bg: rgba(17,19,24,.55); --nav-link-hover-bg: rgba(17,19,24,.75);
  --btn-bg: var(--primary); --btn-fg: var(--primary-foreground);
  --ads-bg:#0b1222; --ads-foreground:#f0f9ff;
}
:root[data-theme="sky"] body{
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(59, 130, 246, 0.03) 2px,
      rgba(59, 130, 246, 0.03) 4px
    );
}

:root[data-theme="light"]{
  --background:#f7fbff; --foreground:#1f2937;
  --card:#ffffff; --card-foreground:#111827;
  --popover:#ffffff; --popover-foreground:#111827;
  --primary:#2563eb; --primary-foreground:#ffffff;
  --secondary:#e5effa; --secondary-foreground:#111827;
  --accent:#06b6d4; --accent-foreground:#ffffff;
  --border:rgba(31,41,55,.18); --input:rgba(31,41,55,.10);
  --ring:#2563eb;
  --nav-bg:#111827; --nav-foreground:#e5e7eb;
  --nav-link-bg: rgba(31,41,55,.14); --nav-link-hover-bg: rgba(31,41,55,.22);
  --btn-bg: var(--primary); --btn-fg: var(--primary-foreground);
  --ads-bg:#eef5ff; --ads-foreground:#0b1324;
}
:root[data-theme="light"] body{
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(37, 99, 235, 0.015) 2px,
      rgba(37, 99, 235, 0.015) 4px
    );
}




/* Global base apply where missing */
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--background);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(59, 130, 246, 0.02) 2px,
      rgba(59, 130, 246, 0.02) 4px
    );
  background-size: 100% 100%, 100% 100%, 40px 40px;
  background-position: 0 0, 0 0, 0 0;
  background-attachment: fixed;
  color:var(--foreground);
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:0.95rem; /* base text size (can scale with viewport) */
  line-height:1.7;
}

/* إزالة أي مربع/خط تركيز (focus/active) على مستوى الموقع بالكامل للعناصر التفاعلية */
button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active,
select:focus,
select:active,
a:focus,
a:active,
[tabindex]:focus,
[tabindex]:active{
  outline:none !important;
  box-shadow:none !important;
}
/* Unified typography scale for all pages (site + CMS) */
h1, h2, h3, h4, h5, h6{
  font-family:"Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:800;
  line-height:1.4;
  margin:0 0 .75rem;
}
h1{ font-size:1.75rem; }
h2{ font-size:1.55rem; }
h3{ font-size:1.35rem; }
h4{ font-size:1.18rem; font-weight:700; }
h5{ font-size:1.05rem; font-weight:700; }
h6{ font-size:.9rem;  font-weight:700; }
@media (min-width: 1024px){
  body{ font-size:1rem; }
  h1{ font-size:2rem; }
  h2{ font-size:1.75rem; }
  h3{ font-size:1.5rem; }
}

/* Small helpers */
.navbar, nav{background:var(--nav-bg); color:var(--nav-foreground)}
.theme-btn, .btn{background:var(--btn-bg); color:var(--btn-fg); border:1px solid color-mix(in oklab, var(--btn-bg), black 18%)}
#adsbar .card, #ticker .card{background:var(--ticker-bg, var(--secondary)); color:var(--ticker-fg, var(--foreground)); border-color:var(--border)}
#adsbar .br-title, #ticker .br-title{color:var(--primary)}
#adsbar .breaking-news a, #ticker .breaking-news a{color:var(--foreground)}
#adsbar .breaking-news a:hover, #ticker .breaking-news a:hover{color:var(--accent)}