/* ═══════════════════════════════════════════════════════════════
   HoK Vault — Base Styles
   Reset, Body, Scrollbar, Background, Liquid Glass Utilities
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
  margin: 0;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ───────────── BODY & SCROLLBAR ───────────── */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s ease;
}

::selection { background: var(--accent-20); color: var(--text-primary); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 99px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }


/* ───────────── ANIMATED AMBIENT BACKGROUND ───────────── */

.bg-mesh {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 25%, var(--accent-08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 75%, rgba(139,92,246,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(6,182,212,0.02) 0%, transparent 60%);
  transition: background 0.8s ease;
}

.orb {
  position: fixed; border-radius: 50%; filter: blur(100px);
  opacity: var(--orb-opacity); transition: opacity 0.6s ease;
  will-change: transform;
}
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--accent-15), transparent 70%);
  top: -10%; left: -8%;
  animation: orbFloat1 25s ease-in-out infinite;
}
.orb-2 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(139,92,246,0.08), transparent 70%);
  bottom: -10%; right: -8%;
  animation: orbFloat2 30s ease-in-out infinite -8s;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(6,182,212,0.06), transparent 70%);
  top: 40%; right: 20%;
  animation: orbFloat3 35s ease-in-out infinite -16s;
}

@keyframes orbFloat1 {
  0%,100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(40px, -30px) scale(1.06); }
  40% { transform: translate(-20px, 40px) scale(0.97); }
  60% { transform: translate(30px, 20px) scale(1.04); }
  80% { transform: translate(-15px, -25px) scale(1.02); }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-35px, 25px) scale(1.08); }
  50% { transform: translate(20px, -35px) scale(0.96); }
  75% { transform: translate(-25px, -15px) scale(1.05); }
}
@keyframes orbFloat3 {
  0%,100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(25px, -20px) scale(1.1); }
  60% { transform: translate(-30px, 25px) scale(0.94); }
}

.particle {
  position: absolute; width: 2px; height: 2px;
  background: var(--accent-20); border-radius: 50%;
  animation: particleDrift linear infinite;
}
@keyframes particleDrift {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  8% { opacity: 0.4; transform: translateY(90vh) scale(1); }
  92% { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}


/* ───────────── LIQUID GLASS CORE UTILITIES ───────────── */

/* Glass Tier 1: Subtle Surface (Filter bar, segmented controls, inputs) */
.glass-surface-1 {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Glass Tier 2: Elevated Surface (Cards, floating panels, crop studio) */
.glass-surface-2 {
  background: var(--glass-bg-elevated);
  backdrop-filter: blur(var(--blur-lg)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(165%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-hover);
}

/* Glass Tier 3: Overlay / Floating Sheet (Modals, Popovers, Dialogs) */
.glass-surface-3 {
  background: var(--glass-bg-overlay);
  backdrop-filter: blur(var(--blur-xl)) saturate(175%);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(175%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-elevated);
}

.liquid-glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}


/* ───────────── UTILITY CLASSES ───────────── */

.accent-text { color: var(--accent); }
.accent-bg   { background: var(--accent); color: var(--accent-text-on); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.divider { height: 1px; background: var(--divider); margin: 4px 0; }

/* Accessible keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}