/* ============================================
   VitaminDigital — CSS Variables & Base
   ============================================ */

:root {
  --bg: #242424;
  --bg-alt: #1a1a1a;
  --bg-card: #2e2e2e;
  --text: #F5F2EB;
  --text-muted: #8A8A8A;
  --yellow: #E8B820;
  --yellow-light: #F5D04A;
  --yellow-dim: rgba(232,184,32,0.08);
  --border: rgba(245,242,235,0.07);
  --border-hover: rgba(245,242,235,0.15);
  --overlay: rgba(36,36,36,0.95);
  --nav-bg: rgba(36,36,36,0.85);
  --card-hover: rgba(232,184,32,0.04);
  --shadow: rgba(0,0,0,0.3);
  --grain-opacity: 0.03;
  --icon-color: #F5F2EB;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

[data-theme="light"] {
  --bg: #F5F2EB;
  --bg-alt: #EBE8E0;
  --bg-card: #FFFFFF;
  --text: #242424;
  --text-muted: #6B6B6B;
  --yellow: #D4A010;
  --yellow-light: #E8B820;
  --yellow-dim: rgba(212,160,16,0.08);
  --border: rgba(36,36,36,0.08);
  --border-hover: rgba(36,36,36,0.2);
  --overlay: rgba(245,242,235,0.95);
  --nav-bg: rgba(245,242,235,0.9);
  --card-hover: rgba(212,160,16,0.06);
  --shadow: rgba(0,0,0,0.08);
  --grain-opacity: 0.015;
  --icon-color: #242424;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--yellow); color: var(--bg); }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
}

/* ===== DUAL LOGO: dark/light switching =====
   .logo-dark  → shown in dark theme, hidden in light
   .logo-light → shown in light theme, hidden in dark
   Replace src with your logo-dark.svg / logo-light.svg files */
.logo-light { display: none; }
.logo-dark  { display: inline-block; }

[data-theme="light"] .logo-light { display: inline-block; }
[data-theme="light"] .logo-dark  { display: none; }

/* Fallback filter if using same PNG for both */
[data-theme="light"] .loader-logo { filter: invert(1) brightness(0.2); }

/* Reveal — visible by default, JS adds animation class if available */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js-ready .reveal.visible { opacity: 1; transform: none; }

[data-lang="bs"] .en { display: none; }
[data-lang="en"] .bs { display: none; }