/* ═══════════════════════════════════════════
   Digital Moroccan casino — Design Tokens
   الهوية الفاخرة: أسود قاتم × ذهب فاتح × نحاسي
   ═══════════════════════════════════════════ */
:root {
  /* ── الألوان الأساسية (داكن قاتم فاخر) ── */
  --bg: #070B12;
  --bg2: #0D1320;
  --bg3: #141C2E;
  --card: #0F1626;
  /* ── الحدود ── */
  --bd: #22304A;
  --bd2: #3A4C70;
  /* حدود أدوات الهيدر — ذهبية رفيعة فاخرة */
  --ctl-bd: rgba(255, 210, 63, 0.28);
  /* ── ألوان العلامة ── */
  --gold: #FFD23F;
  --gold2: #F5C518;
  --copper: #C99050;
  --copper2: #B87333;
  --silver: #A6AAB4;
  --silver2: #C9CBD2;
  --blue: #1A6CF6;
  --blue2: #60A5FA;
  --purple: #7C3AED;
  --purple2: #A78BFA;
  --green: #10B981;
  --green2: #34D399;
  --red: #EF4444;
  --red2: #F87171;
  /* ── النصوص ── */
  --t1: #F6F8FC;
  --t2: #A7B0C3;
  --t3: #66708A;
  /* ── التدرجات ── */
  --gg: linear-gradient(135deg, #FFD23F, #C99050);
  --gb: linear-gradient(135deg, #1A6CF6, #3B82F6);
  --gc: linear-gradient(145deg, #0F1626, #0D1320);
  --gp: linear-gradient(135deg, #7C3AED, #A78BFA);
  --gr: linear-gradient(135deg, #EF4444, #F87171);
  /* ── الظلال ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 22px rgba(255, 210, 63, 0.35);
  /* ── الأبعاد ── */
  --sidebar-w: 260px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  /* ── الانتقالات ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.2, 0.8, 0.3, 1);
  /* ── الخطوط ── */
  --font: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Orbitron', 'Cairo', 'Segoe UI', sans-serif;
  /* ── Safe Area (iOS) ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════
   الوضع المشع (Radiant) — أبيض فاخر وذهبي
   ═══════════════════════════════════════════ */
html[data-theme="radiant"] {
  /* ── الألوان الأساسية ── */
  --bg: #FBF9F4;
  --bg2: #F4EFE3;
  --bg3: #FFFFFF;
  --card: #FFFFFF;
  /* الترويسة العلوية تتكيّف مع الوضع — فاتحة في المشع (الأيقونات تظهر) */
  --topbar-bg: rgba(251, 249, 244, 0.92);
  /* ── الحدود ── */
  --bd: #E6DCC2;
  --bd2: #D6C9A5;
  /* حدود أدوات الهيدر — ذهبية رفيعة فاخرة */
  --ctl-bd: rgba(201, 150, 31, 0.42);
  /* ── ألوان العلامة ── */
  --gold: #C9961F;
  --gold2: #B8860B;
  --copper: #B07B3C;
  --copper2: #8C5A24;
  --silver: #A6AAB4;
  --silver2: #C9CBD2;
  --blue: #1D4ED8;
  --blue2: #3B82F6;
  --purple: #7C3AED;
  --purple2: #8B5CF6;
  --green: #059669;
  --green2: #10B981;
  --red: #DC2626;
  --red2: #EF4444;
  /* ── النصوص ── */
  --t1: #1E1B16;
  --t2: #4A453B;
  --t3: #6E6A60;
  /* ── التدرجات (ذهب → فضة أنيقة) ── */
  --gg: linear-gradient(135deg, #D4A017, #C9CBD2);
  --gb: linear-gradient(135deg, #1D4ED8, #3B82F6);
  --gc: linear-gradient(145deg, #FFFFFF, #F4EFE3);
  --gp: linear-gradient(135deg, #7C3AED, #A78BFA);
  --gr: linear-gradient(135deg, #DC2626, #F87171);
  /* ── الظلال ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-gold: 0 0 22px rgba(201, 150, 31, 0.4);
}

/* الألعاب والمودالات تبقى داكنة ومتباينة بوضوح في الوضعين — تباين كازينو فخم وواضح */
html[data-theme="radiant"] .mwrap,
html[data-theme="radiant"] .modal,
html[data-theme="radiant"] #pg-game,
html[data-theme="radiant"] .rules-full,
html[data-theme="radiant"] .gp-head {
  --bg: #070B12;
  --bg2: #0D1320;
  --bg3: #141C2E;
  --card: #0F1626;
  --bd: #22304A;
  --bd2: #3A4C70;
  --ctl-bd: rgba(255, 210, 63, 0.35);
  --gold: #FFD23F;
  --gold2: #F5C518;
  --copper: #C99050;
  --t1: #F6F8FC;
  --t2: #A7B0C3;
  --t3: #7E8BA6;
  --gc: linear-gradient(145deg, #0F1626, #0D1320);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-gold: 0 0 22px rgba(255, 210, 63, 0.35);
  color: var(--t1);
}