/* 
 * styles/base.css — Master Design System & Core Layout
 */
:root {
  /* Colors */
  --clr-bg: #080808;
  --clr-surface: #121212;
  --clr-surface2: #1a1a1a;
  --clr-surface3: #262626;
  --clr-border: #1e1e1e;
  --clr-border2: #2a2a2a;
  --clr-white: #f5f5f0;
  --clr-muted: #8a8a8a;
  --clr-muted2: #5a5a5a;
  --clr-dim: #3a3a3a;
  --clr-gold: #c9a96e;
  --clr-gold2: #7b5c2e;
  --clr-success: #c9a96e; 
  --clr-danger: #ff4d4d;
  --clr-info: #6e8fc9;
  
  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  
  /* Typography */
  --font-serif: 'Cormorant Garamond', serif;
  --font-sans: 'Space Grotesk', sans-serif;
  
  /* Transitions */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 200ms;
  --dur-normal: 300ms;
  --dur-slow: 500ms;
  
  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  /* Z-Index */
  --z-screen: 10;
  --z-nav: 100;
  --z-toast: 1000;
  --z-modal: 2000;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--clr-bg);
  color: var(--clr-white);
  font-family: var(--font-sans);
  overflow: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100vw;
  height: 100dvh;
  position: relative;
  background: var(--clr-bg);
}

.screen {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-normal) var(--ease), transform var(--dur-normal) var(--ease);
  transform: translateY(10px) scale(0.98);
  background: var(--clr-bg);
  display: flex;
  flex-direction: column;
  z-index: var(--z-screen);
}

.screen.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.screen.exit {
  opacity: 0;
  transform: translateY(-10px) scale(1.02);
}

.screen::-webkit-scrollbar { display: none; }
.screen { scrollbar-width: none; overflow-y: auto; }

/* Global Components */
.loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--sp-5);
  background: var(--clr-bg);
}

.loader-orb {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--clr-gold), var(--clr-gold2));
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.3);
  animation: orb-pulse 2s infinite ease-in-out;
}

@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 50px rgba(201, 169, 110, 0.4); }
}