/* === DESIGN TOKENS — Premium Themes === */

/* Fluid base sizing — scales all rem-based values smoothly */
html {
  font-size: clamp(13.5px, 1.8vw, 16px);
}

:root {
  /* ── Accent RGB channels (single source of truth) ── */
  --accent-r: 99; --accent-g: 102; --accent-b: 241;

  /* Primary Palette — Blue-Purple / Indigo (default accent for light theme) */
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #818cf8;
  --color-primary-lighter: #e0e7ff;
  --color-primary-ghost: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06);
  --color-primary-glow: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.18);

  /* Secondary — Warm Coral */
  --color-secondary: #f43f5e;
  --color-secondary-glow: rgba(244, 63, 94, 0.15);

  /* Backgrounds — Warm Light (softened) */
  --color-bg: #f0f1f5;
  --color-bg-pure: #fafbfd;
  --color-surface: #fafbfd;
  --color-surface-2: #eceef6;
  --color-surface-hover: #e5e7f0;
  --color-surface-active: #dcdee9;

  /* Sidebar */
  --color-sidebar-bg: #fafbfd;
  --color-sidebar-accent: var(--color-primary);
  --color-sidebar-hover: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.05);

  /* Functional accents */
  --color-ad-panel: #f1f3f9;
  --color-ad-panel-dark: #e2e5ef;
  --color-search: var(--color-primary);
  --color-search-hover: var(--color-primary-dark);
  --color-auth: #f43f5e;
  --color-auth-hover: #fb7185;
  --color-comment-bg: #f8f9fc;
  --color-glass: rgba(255, 255, 255, 0.72);

  /* Game section colors */
  --color-game-icon: var(--color-primary);
  --color-game-icon-hover: var(--color-primary-dark);
  --color-popular-bg: #fafbfd;

  /* Text — Dark on Light */
  --color-text: #1e1b4b;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-link: #6366f1;
  --color-link-hover: #4f46e5;

  /* Star rating */
  --color-star: #f59e0b;
  --color-star-empty: #e5e7eb;

  /* Status */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* Borders */
  --border-subtle: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06);
  --border-default: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);
  --border-emphasis: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.18);
  --border-glow: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20);

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-hover: rgba(255, 255, 255, 0.88);
  --glass-blur: blur(24px) saturate(1.8);
  --glass-border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);

  /* Shadows — soft colored */
  --shadow-xs: 0 1px 2px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.04);
  --shadow-sm: 0 2px 8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 32px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 60px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-glow-primary: 0 4px 24px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20), 0 0 48px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06);
  --shadow-glow-search: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --shadow-glow-secondary: 0 4px 24px rgba(244, 63, 94, 0.15);
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Typography */
  --font-main: 'Inter', 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Noto Sans Arabic', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --fs-xs: 0.6875rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout dimensions */
  --header-height: 64px;
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 68px;
  --ad-panel-width: 180px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-sidebar: 250;
  --z-dropdown: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* === THEME TRANSITION — only active during switch (class toggled by JS) === */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.35s ease,
              color 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease !important;
}

/* === DARK THEME === */
[data-theme="dark"] {
  /* Accent RGB for dark */
  --accent-r: 251; --accent-g: 146; --accent-b: 60;

  /* Primary Palette — brighter orange for dark bg */
  --color-primary: #fb923c;
  --color-primary-dark: #f97316;
  --color-primary-light: #fdba74;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-primary-ghost: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);
  --color-primary-glow: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.22);

  /* Secondary — Warm Coral (brighter) */
  --color-secondary: #fb7185;
  --color-secondary-glow: rgba(251, 113, 133, 0.18);

  /* Backgrounds — Deep Slate (lifted for contrast) */
  --color-bg: #0f1117;
  --color-bg-pure: #1a1f2e;
  --color-surface: #212840;
  --color-surface-2: #2a324d;
  --color-surface-hover: #323b58;
  --color-surface-active: #3b4563;

  /* Sidebar */
  --color-sidebar-bg: #161b28;
  --color-sidebar-accent: var(--color-primary);
  --color-sidebar-hover: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);

  /* Functional accents */
  --color-ad-panel: #1a1f2e;
  --color-ad-panel-dark: #2a324d;
  --color-search: var(--color-primary);
  --color-search-hover: var(--color-primary-light);
  --color-auth: #fb7185;
  --color-auth-hover: #f43f5e;
  --color-comment-bg: #1e2438;
  --color-glass: #212840;

  /* Game section colors */
  --color-game-icon: var(--color-primary);
  --color-game-icon-hover: var(--color-primary-light);
  --color-popular-bg: #1a1f2e;

  /* Text — Light on Dark */
  --color-text: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #7a8ba4;
  --color-text-inverse: #0f1117;
  --color-link: #fdba74;
  --color-link-hover: #fb923c;

  /* Star rating */
  --color-star: #fbbf24;
  --color-star-empty: #3d4a63;

  /* Status */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;

  /* Borders — more visible in dark */
  --border-subtle: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.10);
  --border-default: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.16);
  --border-emphasis: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.24);
  --border-glow: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.30);

  /* Glass surfaces */
  --glass-bg: rgba(26, 31, 46, 0.85);
  --glass-bg-hover: rgba(33, 40, 64, 0.92);
  --glass-blur: blur(24px) saturate(1.4);
  --glass-border: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.14);

  /* Shadows — dark mode glow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-glow-primary: 0 4px 24px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25), 0 0 48px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.08);
  --shadow-glow-search: 0 4px 20px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20);
  --shadow-glow-secondary: 0 4px 24px rgba(251, 113, 133, 0.20);
  --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ================================================================
   ACCENT COLOR PRESETS — override --accent-r/g/b + --color-primary-*
   ================================================================ */

/* Blue */
[data-accent="blue"] {
  --accent-r: 59; --accent-g: 130; --accent-b: 246;
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #60a5fa;
  --color-primary-lighter: #eff6ff;
  --color-link: #3b82f6; --color-link-hover: #2563eb;
}
[data-theme="dark"][data-accent="blue"] {
  --accent-r: 96; --accent-g: 165; --accent-b: 250;
  --color-primary: #60a5fa;
  --color-primary-dark: #3b82f6;
  --color-primary-light: #93bbfd;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #93bbfd; --color-link-hover: #60a5fa;
}

/* Orange */
[data-accent="orange"] {
  --accent-r: 249; --accent-g: 115; --accent-b: 22;
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-primary-light: #fb923c;
  --color-primary-lighter: #fff7ed;
  --color-link: #f97316; --color-link-hover: #ea580c;
}
[data-theme="dark"][data-accent="orange"] {
  --accent-r: 251; --accent-g: 146; --accent-b: 60;
  --color-primary: #fb923c;
  --color-primary-dark: #f97316;
  --color-primary-light: #fdba74;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #fdba74; --color-link-hover: #fb923c;
}

/* Purple / Indigo (original) */
[data-accent="purple"] {
  --accent-r: 99; --accent-g: 102; --accent-b: 241;
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #818cf8;
  --color-primary-lighter: #e0e7ff;
  --color-link: #6366f1; --color-link-hover: #4f46e5;
}
[data-theme="dark"][data-accent="purple"] {
  --accent-r: 129; --accent-g: 140; --accent-b: 248;
  --color-primary: #818cf8;
  --color-primary-dark: #6366f1;
  --color-primary-light: #a5b4fc;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #a5b4fc; --color-link-hover: #818cf8;
}

/* Teal */
[data-accent="teal"] {
  --accent-r: 20; --accent-g: 184; --accent-b: 166;
  --color-primary: #14b8a6;
  --color-primary-dark: #0d9488;
  --color-primary-light: #2dd4bf;
  --color-primary-lighter: #f0fdfa;
  --color-link: #14b8a6; --color-link-hover: #0d9488;
}
[data-theme="dark"][data-accent="teal"] {
  --accent-r: 45; --accent-g: 212; --accent-b: 191;
  --color-primary: #2dd4bf;
  --color-primary-dark: #14b8a6;
  --color-primary-light: #5eead4;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #5eead4; --color-link-hover: #2dd4bf;
}

/* Rose */
[data-accent="rose"] {
  --accent-r: 244; --accent-g: 63; --accent-b: 94;
  --color-primary: #f43f5e;
  --color-primary-dark: #e11d48;
  --color-primary-light: #fb7185;
  --color-primary-lighter: #fff1f2;
  --color-link: #f43f5e; --color-link-hover: #e11d48;
}
[data-theme="dark"][data-accent="rose"] {
  --accent-r: 251; --accent-g: 113; --accent-b: 133;
  --color-primary: #fb7185;
  --color-primary-dark: #f43f5e;
  --color-primary-light: #fda4af;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #fda4af; --color-link-hover: #fb7185;
}

/* Emerald */
[data-accent="emerald"] {
  --accent-r: 16; --accent-g: 185; --accent-b: 129;
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-primary-light: #34d399;
  --color-primary-lighter: #ecfdf5;
  --color-link: #10b981; --color-link-hover: #059669;
}
[data-theme="dark"][data-accent="emerald"] {
  --accent-r: 52; --accent-g: 211; --accent-b: 153;
  --color-primary: #34d399;
  --color-primary-dark: #10b981;
  --color-primary-light: #6ee7b7;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #6ee7b7; --color-link-hover: #34d399;
}

/* Slate */
[data-accent="slate"] {
  --accent-r: 100; --accent-g: 116; --accent-b: 139;
  --color-primary: #64748b;
  --color-primary-dark: #475569;
  --color-primary-light: #94a3b8;
  --color-primary-lighter: #f1f5f9;
  --color-link: #64748b; --color-link-hover: #475569;
}
[data-theme="dark"][data-accent="slate"] {
  --accent-r: 148; --accent-g: 163; --accent-b: 184;
  --color-primary: #94a3b8;
  --color-primary-dark: #64748b;
  --color-primary-light: #cbd5e1;
  --color-primary-lighter: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
  --color-link: #cbd5e1; --color-link-hover: #94a3b8;
}