/* ==========================================================================
   VPLUSE CENTRALIZED DESIGN SYSTEM
   ========================================================================== */

/* GLOBAL TRANSPARENCY RULES TO REVEAL BODY BACKGROUND IMAGE */
html.theme-robots #root,
html.theme-robots div[style*="var(--rb-bg)"],
html.theme-robots div[style*="var(--bg)"],
html.theme-pirates #root,
html.theme-pirates div[style*="var(--rb-bg)"],
html.theme-pirates div[style*="var(--bg)"],
html.theme-rockers #root,
html.theme-rockers div[style*="var(--rb-bg)"],
html.theme-rockers div[style*="var(--bg)"],
html.theme-aliens #root,
html.theme-aliens div[style*="var(--rb-bg)"],
html.theme-aliens div[style*="var(--bg)"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* OVERRIDES FOR BODY BACKGROUNDS WITH IMAGE + THEME BASE COLOR */
html.theme-robots body {
  background-color: #0d1117 !important;
  background-image: linear-gradient(rgba(13, 17, 23, 0.91), rgba(13, 17, 23, 0.91)), url('https://vpluse.website/backgrounds/robots.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
}

html.theme-pirates body {
  background-color: #1c1611 !important;
  background-image: linear-gradient(rgba(28, 22, 17, 0.91), rgba(28, 22, 17, 0.91)), url('https://vpluse.website/backgrounds/pirates.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
}

html.theme-rockers body {
  background-color: #080808 !important;
  background-image: linear-gradient(rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.92)), url('https://vpluse.website/backgrounds/rockers.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
}

html.theme-aliens body {
  background-color: #010904 !important;
  background-image: linear-gradient(rgba(1, 9, 4, 0.93), rgba(1, 9, 4, 0.93)), url('https://vpluse.website/backgrounds/aliens.png') !important;
  background-size: cover !important;
  background-attachment: fixed !important;
  background-position: center !important;
}

/* 1. ROBOTS THEME (Default) */
html.theme-robots {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --border-color: rgba(0, 210, 255, 0.15);
  --accent-color: #00d2ff;
  --text-primary: #f0f6fc;
  --text-secondary: #8b949e;
  --font-family: 'Orbitron', 'Inter', sans-serif;
  --glow-effect: 0 0 8px rgba(0, 210, 255, 0.4);

  /* SSO / okk_kpi_site Host Fallback mappings */
  --rb-bg: var(--bg-primary);
  --rb-surface: var(--bg-secondary);
  --rb-card: var(--bg-secondary);
  --rb-card-hover: #21262d;
  --rb-border: var(--border-color);
  --rb-cyan: var(--accent-color);
  --rb-cyan-rgb: 0, 210, 255;
  --rb-text: var(--text-primary);
  --rb-text-dim: var(--text-secondary);
  --rb-text-muted: #30363d;
  --rb-font-head: var(--font-family);

  /* aisite_analyze direct mappings */
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --card: var(--bg-secondary);
  --card-hover: #21262d;
  --border: var(--border-color);
  --accent: var(--accent-color);
  --accent-dim: rgba(0, 210, 255, 0.12);
  --font-sans: 'Inter', sans-serif;
  --font-head: var(--font-family);

  /* Tailwind v4 mappings (for parser_site, okk_kpi_site etc) */
  --color-slate-950: #060c1a;
  --color-slate-900: #0d1c32;
  --color-slate-800: rgba(0, 210, 255, 0.11);
  --color-slate-700: rgba(0, 210, 255, 0.32);
  --color-slate-600: #263248;
  --color-slate-500: #4a6880;
  --color-slate-200: #dce8f5;
  --color-indigo-500: #00d2ff;
  --color-indigo-400: #33dbff;
  --color-indigo-300: #7ae8ff;
  --color-indigo-200: #b3ecff;
  --color-emerald-500: #00ffa3;
  --color-rose-500: #ff2060;
  --color-amber-500: #ffc200;
  --color-sky-500: #00d2ff;

  /* Semantic mappings (for backoffice) */
  --color-bg: #060c1a;
  --color-surface: #0d1c32;
  --color-surface-hover: #122440;
  --color-text: #dce8f5;
  --color-text-muted: #4a6880;
  --color-border: rgba(0, 210, 255, 0.11);
  --color-sidebar: #07101f;
  --color-sidebar-surface: #0d1c32;
  --color-sidebar-border: rgba(0, 210, 255, 0.11);
  --color-sidebar-text: #dce8f5;
  --color-sidebar-text-muted: #4a6880;
  --color-accent: #00d2ff;
  --color-accent-hover: #33dbff;
  --color-accent-soft: rgba(0, 210, 255, 0.12);
  --font-heading: 'Orbitron', 'Manrope', sans-serif;
}

/* 2. PIRATES THEME */
html.theme-pirates {
  --bg-primary: #1c1611;
  --bg-secondary: #2a2018;
  --border-color: rgba(212, 175, 55, 0.25);
  --accent-color: #d4af37; /* Pirate Gold */
  --text-primary: #f5eedc;
  --text-secondary: #a69886;
  --font-family: 'Georgia', serif;
  --glow-effect: none;

  /* SSO / okk_kpi_site Host Fallback mappings */
  --rb-bg: var(--bg-primary);
  --rb-surface: var(--bg-secondary);
  --rb-card: var(--bg-secondary);
  --rb-card-hover: #3d3025;
  --rb-border: var(--border-color);
  --rb-cyan: var(--accent-color);
  --rb-cyan-rgb: 212, 175, 55;
  --rb-text: var(--text-primary);
  --rb-text-dim: var(--text-secondary);
  --rb-text-muted: #4e3f32;
  --rb-font-head: var(--font-family);
  --rb-font: var(--font-family);

  /* aisite_analyze direct mappings */
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --card: var(--bg-secondary);
  --card-hover: #3d3025;
  --border: var(--border-color);
  --accent: var(--accent-color);
  --accent-dim: rgba(212, 175, 55, 0.12);
  --font-sans: var(--font-family);
  --font-head: var(--font-family);

  /* Tailwind v4 mappings */
  --color-slate-950: var(--bg-primary);
  --color-slate-900: var(--bg-secondary);
  --color-slate-800: var(--border-color);
  --color-slate-700: rgba(212, 175, 55, 0.45);
  --color-slate-600: #7a6b58;
  --color-slate-500: var(--text-secondary);
  --color-slate-200: var(--text-primary);
  --color-indigo-500: var(--accent-color);
  --color-indigo-400: #e6c35c;
  --color-indigo-300: #f0d584;
  --color-indigo-200: #faebad;
  --color-emerald-500: #cca329;
  --color-rose-500: #b83a25;
  --color-amber-500: var(--accent-color);
  --color-sky-500: var(--accent-color);
  --font-sans: var(--font-family);

  /* Semantic mappings */
  --color-bg: var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-surface-hover: #35291f;
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border-color);
  --color-sidebar: #17120e;
  --color-sidebar-surface: var(--bg-secondary);
  --color-sidebar-border: var(--border-color);
  --color-sidebar-text: var(--text-primary);
  --color-sidebar-text-muted: var(--text-secondary);
  --color-accent: var(--accent-color);
  --color-accent-hover: #e6c35c;
  --color-accent-soft: rgba(212, 175, 55, 0.12);
  --font-heading: var(--font-family);
}

/* 3. ROCKERS & METALISTS THEME */
html.theme-rockers {
  --bg-primary: #080808;
  --bg-secondary: #121212;
  --border-color: rgba(255, 7, 58, 0.3);
  --accent-color: #ff073a; /* Neon Red */
  --text-primary: #ffffff;
  --text-secondary: #9c9c9c;
  --font-family: 'Impact', 'Arial Black', sans-serif;
  --glow-effect: 0 0 10px rgba(255, 7, 58, 0.5);

  /* SSO / okk_kpi_site Host Fallback mappings */
  --rb-bg: var(--bg-primary);
  --rb-surface: var(--bg-secondary);
  --rb-card: var(--bg-secondary);
  --rb-card-hover: #1e1e1e;
  --rb-border: var(--border-color);
  --rb-cyan: var(--accent-color);
  --rb-cyan-rgb: 255, 7, 58;
  --rb-text: var(--text-primary);
  --rb-text-dim: var(--text-secondary);
  --rb-text-muted: #2c2c2c;
  --rb-font-head: var(--font-family);
  --rb-font: 'Arial Black', sans-serif;

  /* aisite_analyze direct mappings */
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --card: var(--bg-secondary);
  --card-hover: #1c1c1c;
  --border: var(--border-color);
  --accent: var(--accent-color);
  --accent-dim: rgba(255, 7, 58, 0.12);
  --font-sans: 'Arial Black', sans-serif;
  --font-head: var(--font-family);

  /* Tailwind v4 mappings */
  --color-slate-950: var(--bg-primary);
  --color-slate-900: var(--bg-secondary);
  --color-slate-800: var(--border-color);
  --color-slate-700: rgba(255, 7, 58, 0.55);
  --color-slate-600: #555555;
  --color-slate-500: var(--text-secondary);
  --color-slate-200: var(--text-primary);
  --color-indigo-500: var(--accent-color);
  --color-indigo-400: #ff385c;
  --color-indigo-300: #ff6b85;
  --color-indigo-200: #ff9eaf;
  --color-emerald-500: #e60033;
  --color-rose-500: var(--accent-color);
  --color-amber-500: #cc002c;
  --color-sky-500: var(--accent-color);

  /* Semantic mappings */
  --color-bg: var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-surface-hover: #1c1c1c;
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border-color);
  --color-sidebar: #040404;
  --color-sidebar-surface: var(--bg-secondary);
  --color-sidebar-border: var(--border-color);
  --color-sidebar-text: var(--text-primary);
  --color-sidebar-text-muted: var(--text-secondary);
  --color-accent: var(--accent-color);
  --color-accent-hover: #ff385c;
  --color-accent-soft: rgba(255, 7, 58, 0.12);
  --font-heading: var(--font-family);
}

/* 4. ALIENS THEME */
html.theme-aliens {
  --bg-primary: #010904;
  --bg-secondary: #04150a;
  --border-color: rgba(57, 255, 20, 0.25);
  --accent-color: #39ff14; /* UFO Green */
  --text-primary: #d0ffd0;
  --text-secondary: #609060;
  --font-family: 'Courier New', Courier, monospace;
  --glow-effect: 0 0 6px rgba(57, 255, 20, 0.3);

  /* SSO / okk_kpi_site Host Fallback mappings */
  --rb-bg: var(--bg-primary);
  --rb-surface: var(--bg-secondary);
  --rb-card: var(--bg-secondary);
  --rb-card-hover: #0b2d15;
  --rb-border: var(--border-color);
  --rb-cyan: var(--accent-color);
  --rb-cyan-rgb: 57, 255, 20;
  --rb-text: var(--text-primary);
  --rb-text-dim: var(--text-secondary);
  --rb-text-muted: #113a1a;
  --rb-font-head: var(--font-family);
  --rb-font: var(--font-family);

  /* aisite_analyze direct mappings */
  --bg: var(--bg-primary);
  --surface: var(--bg-secondary);
  --card: var(--bg-secondary);
  --card-hover: #072210;
  --border: var(--border-color);
  --accent: var(--accent-color);
  --accent-dim: rgba(57, 255, 20, 0.12);
  --font-sans: var(--font-family);
  --font-head: var(--font-family);

  /* Tailwind v4 mappings */
  --color-slate-950: var(--bg-primary);
  --color-slate-900: var(--bg-secondary);
  --color-slate-800: var(--border-color);
  --color-slate-700: rgba(57, 255, 20, 0.5);
  --color-slate-600: #225522;
  --color-slate-500: var(--text-secondary);
  --color-slate-200: var(--text-primary);
  --color-indigo-500: var(--accent-color);
  --color-indigo-400: #66ff4d;
  --color-indigo-300: #93ff80;
  --color-indigo-200: #c0ffb3;
  --color-emerald-500: var(--accent-color);
  --color-rose-500: #2b9911;
  --color-amber-500: #33cc14;
  --color-sky-500: var(--accent-color);

  /* Semantic mappings */
  --color-bg: var(--bg-primary);
  --color-surface: var(--bg-secondary);
  --color-surface-hover: #072210;
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-border: var(--border-color);
  --color-sidebar: #000402;
  --color-sidebar-surface: var(--bg-secondary);
  --color-sidebar-border: var(--border-color);
  --color-sidebar-text: var(--text-primary);
  --color-sidebar-text-muted: var(--text-secondary);
  --color-accent: var(--accent-color);
  --color-accent-hover: #66ff4d;
  --color-accent-soft: rgba(57, 255, 20, 0.12);
  --font-heading: var(--font-family);
}