/* ==========================================================================
   THEME - Design Tokens, Color Schemes, Variables
   Yellow Bay Technologies
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* Root Variables - Light Theme (Default) */
:root {
  /* Brand Colors */
  --bay-ink: #0B1220;
  --bay-gold: #FFC857;
  --bay-sky: #77B6EA;
  --bay-teal: #2BBBAD;
  --bay-mist: #F5F7FB;
  --bay-line: #E6ECF5;
  
  /* Semantic Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--bay-mist);
  --bg-elevated: #FFFFFF;
  
  --text-primary: var(--bay-ink);
  --text-secondary: #4A5568;
  --text-tertiary: #718096;
  --text-inverse: #FFFFFF;
  
  --border-color: var(--bay-line);
  --border-hover: var(--bay-sky);
  
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.1);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.12);
  --shadow-xl: 0 20px 48px rgba(11, 18, 32, 0.15);
  
  /* Typography */
  --font-heading: 'Cinzel', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  
  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Spacing (used in components) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-primary: #0B1220;
  --bg-secondary: #151F2F;
  --bg-elevated: #1A2332;
  
  --text-primary: #F5F7FB;
  --text-secondary: #CBD5E0;
  --text-tertiary: #A0AEC0;
  --text-inverse: var(--bay-ink);
  
  --border-color: #2D3748;
  --border-hover: var(--bay-sky);
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* Gradient Definitions */
.gradient-gold {
  background: linear-gradient(135deg, var(--bay-gold) 0%, #FFB347 100%);
}

.gradient-sky {
  background: linear-gradient(135deg, var(--bay-sky) 0%, #5A9FD4 100%);
}

.gradient-teal {
  background: linear-gradient(135deg, var(--bay-teal) 0%, #249688 100%);
}

.gradient-hero {
  background: linear-gradient(135deg, 
    rgba(11, 18, 32, 0.95) 0%, 
    rgba(43, 187, 173, 0.15) 50%,
    rgba(255, 200, 87, 0.1) 100%
  );
}

.gradient-overlay {
  position: relative;
}

.gradient-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, 
    rgba(11, 18, 32, 0) 0%, 
    rgba(11, 18, 32, 0.8) 100%
  );
  pointer-events: none;
}

/* Animated Gradient Background */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.bg-animated {
  background: linear-gradient(
    -45deg,
    var(--bay-ink),
    #1a2742,
    var(--bay-teal),
    var(--bay-sky)
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* Glass Morphism Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .glass {
  background: rgba(11, 18, 32, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--bay-sky);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bay-teal);
}