/* Brand system CSS - Performance optimized */
/* Font import removed - loaded via index.html with font-display:swap */
/* This eliminates render-blocking CSS import */

* {
  box-sizing: border-box;
}

:root {
  /* ===== LAYERING SCALE — single source of truth for stacking =====
     Every overlay in the app maps to one of these. Primitives (dialog,
     sheet, drawer, alert-dialog) sit ABOVE FABs, nav and floating panels. */
  --z-panel: 60;
  --z-nav: 70;
  --z-float: 80;
  --z-overlay: 1000;
  --z-modal: 1010;
  --z-popover: 1050;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* ===== BRAND COLORS - SINGLE SOURCE OF TRUTH ===== */
  --brand-dark-blue: #0D223C;
  --brand-rich-blue: #021389;
  --brand-golden: #B4853D;
  --brand-white: #FFFFFF;
  --brand-black: #000000;
  
  /* ===== HSL CONVERSIONS (for Tailwind compatibility) ===== */
  --background: 213 65% 14%;
  --foreground: 0 0% 98%;
  --card: 211 55% 19%;
  --card-foreground: 0 0% 98%;
  --popover: 211 55% 19%;
  --popover-foreground: 0 0% 98%;
  --primary: 217 91% 60%;              /* Light blue #3B82F6 - visible on dark */
  --primary-foreground: 0 0% 100%;
  --primary-glow: 217 91% 65%;
  --primary-variant: 217 91% 55%;
  --primary-text: 217 91% 70%;          /* Even lighter for text */
  --secondary: 209 50% 23%;
  --secondary-foreground: 0 0% 95%;
  --muted: 209 50% 23%;
  --muted-foreground: 0 0% 65%;
  --accent: 37 68% 47%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 100% / 0.08;
  --input: 0 0% 100% / 0.08;
  --ring: 37 68% 47%;
  --radius: 0.75rem;
  --success: 160 84% 45%;
  --success-foreground: 0 0% 100%;
  --warning: 38 92% 55%;
  --warning-foreground: 0 0% 0%;
  
  /* ===== EXTENDED BLUE PALETTE ===== */
  --blue-darker: 216 62% 10%;
  --blue-dark: 213 65% 14%;
  --blue-mid: 211 55% 19%;
  --blue-light: 209 50% 23%;
  --blue-accent: 217 91% 60%;          /* Light blue accent */
  
  /* ===== GOLDEN ACCENT PALETTE ===== */
  --golden: 37 68% 47%;
  --golden-light: 37 55% 57%;
  --golden-subtle: 37 68% 47% / 0.1;
  --accent-golden: 37 68% 47%;
  
  /* ===== GLASSMORPHISM - REFINED ===== */
  --glass-bg: 213 65% 14% / 0.5;
  --glass-bg-hover: 213 65% 14% / 0.7;
  --glass-bg-strong: 213 65% 14% / 0.85;
  --glass-border: 0 0% 100% / 0.04;
  --glass-border-strong: 0 0% 100% / 0.08;
  --glass-border-accent: 37 68% 47% / 0.15;
  
  /* Refined glass for gated overlays */
  --glass-overlay-bg: 213 65% 12% / 0.75;
  --glass-overlay-border: 0 0% 100% / 0.06;
  --glass-panel-bg: 213 65% 16% / 0.85;
  --glass-panel-border: 0 0% 100% / 0.08;
  
  /* ===== BLUR LEVELS - REFINED ===== */
  --blur-sm: blur(8px);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);
  --blur-xl: blur(40px);
  --blur-gated: blur(12px);
  
  /* ===== GRADIENTS ===== */
  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(213 65% 14%) 100%);
  --gradient-reverse: linear-gradient(135deg, hsl(213 65% 14%) 0%, hsl(217 91% 60%) 100%);
  --gradient-golden: linear-gradient(135deg, hsl(37 68% 47%) 0%, hsl(37 55% 57%) 100%);
  --gradient-dark: linear-gradient(180deg, hsl(216 62% 10%) 0%, hsl(213 65% 14%) 100%);
  --gradient-hero: linear-gradient(180deg, hsl(213 65% 14%) 0%, hsl(216 62% 10%) 100%);
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 8px hsl(0 0% 0% / 0.15);
  --shadow-md: 0 4px 20px hsl(217 91% 60% / 0.1);
  --shadow-lg: 0 8px 40px hsl(217 91% 60% / 0.12);
  --shadow-xl: 0 20px 60px hsl(217 91% 60% / 0.15);
  --shadow-glow: 0 0 40px hsl(37 68% 47% / 0.15);
  --shadow-premium: 0 0 0 1px hsl(var(--border)), 0 8px 32px hsl(var(--primary) / 0.08);
  --shadow-neural: 0 0 30px hsl(var(--primary) / 0.1);
  --shadow-data: 0 4px 20px hsl(var(--primary) / 0.08);
  
  /* ===== PATTERNS ===== */
  --neural-pattern: radial-gradient(circle at 25% 25%, hsl(217 91% 60% / 0.03) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, hsl(37 68% 47% / 0.02) 0%, transparent 50%);
  --grid-pattern: linear-gradient(hsl(0 0% 100% / 0.02) 1px, transparent 1px),
                  linear-gradient(90deg, hsl(0 0% 100% / 0.02) 1px, transparent 1px);
  
  /* ===== SPACING ===== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  
  /* ===== RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-premium: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* ===== TYPOGRAPHY ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Roboto Mono', 'Consolas', monospace;
  
  /* ===== CLS PREVENTION - Reserve space for dynamic content ===== */
  --min-h-card-sm: 80px;
  --min-h-card-md: 120px;
  --min-h-card-lg: 166px;
  --min-h-share-section: 66px;
  
  /* ===== FUNCTIONAL COLORS ===== */
  --success-bg: 160 84% 45% / 0.1;
  --warning-bg: 38 92% 55% / 0.1;
  --error: 0 84% 60%;
  --error-bg: 0 84% 60% / 0.1;
  --info: 217 91% 60%;
  --info-bg: 217 91% 60% / 0.1;
  
  /* Legacy aliases for backwards compatibility */
  --bg-primary: var(--background);
  --bg-secondary: var(--card);
  --bg-tertiary: var(--secondary);
  --bg-elevated: var(--muted);
  --white-100: 0 0% 100%;
  --white-90: 0 0% 98%;
  --white-80: 0 0% 91%;
  --white-60: 0 0% 65%;
  --white-40: 0 0% 46%;
  --white-20: 0 0% 27%;
  --white-10: 0 0% 16%;
  --accent-primary: var(--primary);
  --accent-hover: var(--primary-glow);
  --accent-subtle: var(--primary) / 0.1;
  
  /* ===== CHART CANVAS TOKENS ===== */
  --chart-canvas-bg: hsl(211 55% 19%);
  --chart-grid-line: rgba(255, 255, 255, 0.06);
  --chart-axis-text: hsl(209 50% 45%);
  --chart-crosshair-label: #152D4A;
  --chart-bb-middle: rgba(255, 255, 255, 0.5);
  --chart-watermark: #fff;
  --chart-text-primary: #fff;
  --chart-text-secondary: #d1d4dc;
  --chart-summary-bg: rgba(21, 45, 74, 0.5);
  --chart-divider: rgba(21, 45, 74, 0.2);
  --chart-footer-bg: rgba(21, 45, 74, 0.15);
  --chart-footer-border: rgba(21, 45, 74, 0.3);
  --chart-pill-bg: hsla(211, 55%, 19%, 0.85);
  --chart-muted-label: hsl(209 50% 45%);
  --chart-muted-subtle: hsl(209 50% 35%);
  --chart-vendor-text: hsl(145 65% 55%);
  --chart-client-text: hsl(217 91% 65%);
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  --background: 210 25% 98%;
  --foreground: 213 65% 14%;
  --card: 0 0% 100%;
  --card-foreground: 213 65% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 65% 14%;
  --primary: 231 90% 35%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 25% 93%;
  --secondary-foreground: 213 65% 18%;
  --muted: 210 22% 92%;
  --muted-foreground: 213 40% 40%;
  --accent: 37 68% 42%;
  --accent-foreground: 0 0% 100%;
  --border: 213 30% 88%;
  --input: 213 28% 90%;
  --ring: 37 68% 42%;
  
  --glass-bg: 0 0% 100% / 0.85;
  --glass-bg-hover: 0 0% 100% / 0.95;
  --glass-bg-strong: 0 0% 100%;
  --glass-border: 213 65% 14% / 0.08;
  --glass-border-strong: 213 65% 14% / 0.12;
  
  --shadow-sm: 0 1px 3px hsl(213 65% 14% / 0.06);
  --shadow-md: 0 4px 16px hsl(213 65% 14% / 0.08);
  --shadow-lg: 0 8px 30px hsl(213 65% 14% / 0.1);
  --shadow-xl: 0 20px 50px hsl(213 65% 14% / 0.12);
  --shadow-glow: 0 0 25px hsl(37 68% 47% / 0.15);
  
  --gradient-primary: linear-gradient(135deg, hsl(231 90% 40%) 0%, hsl(213 65% 20%) 100%);
  --gradient-dark: linear-gradient(180deg, hsl(210 25% 98%) 0%, hsl(0 0% 100%) 100%);
  
  /* ===== CHART CANVAS TOKENS (LIGHT) ===== */
  --chart-canvas-bg: hsl(210 25% 97%);
  --chart-grid-line: rgba(0, 0, 0, 0.07);
  --chart-axis-text: hsl(213 40% 45%);
  --chart-crosshair-label: hsl(210 25% 92%);
  --chart-bb-middle: rgba(0, 0, 0, 0.35);
  --chart-watermark: hsl(213 30% 30%);
  --chart-text-primary: hsl(213 65% 14%);
  --chart-text-secondary: hsl(213 40% 35%);
  --chart-summary-bg: hsl(210 25% 93% / 0.85);
  --chart-divider: hsl(213 30% 85%);
  --chart-footer-bg: hsl(210 25% 95% / 0.6);
  --chart-footer-border: hsl(213 30% 85%);
  --chart-pill-bg: hsla(210, 25%, 97%, 0.9);
  --chart-muted-label: hsl(213 40% 45%);
  --chart-muted-subtle: hsl(213 30% 60%);
  --chart-vendor-text: hsl(145 65% 35%);
  --chart-client-text: hsl(231 90% 40%);
}

/* ===== CLS PREVENTION - Font Metric Adjustments ===== */
/* Match system font fallback metrics to Inter to prevent layout shift */
@font-face {
  font-family: 'Inter Fallback';
  src: local('BlinkMacSystemFont'), local('-apple-system'), local('Segoe UI'), local('Roboto'), local('sans-serif');
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

/* ===== BRAND SYSTEM BASE STYLES ===== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* scroll-behavior: removed — smooth scrolling is opt-in per-call (useKeyboardScroll, ScrollToTop) */
  /* Use fallback font stack with metric-matched fallback */
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}

/* Scroll stability is consolidated in the SCROLL MECHANISM block below (~line 430) */

/* Ensure body fills viewport */
body {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport for mobile */
}

[data-theme="light"] body {
  background: #FFFFFF;
  color: var(--brand-dark-blue);
}

/* Glass effects */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  box-shadow: 0 0 0 1px var(--glass-border), var(--shadow-lg);
  transition: all var(--transition-base);
}

.glass-hover:hover {
  background: var(--glass-bg-hover);
  box-shadow: 0 0 0 1px var(--glass-border-strong), var(--shadow-xl);
  transform: translateY(-2px);
}

/* Text gradient */
.text-gradient-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow effects - using light blue for visibility */
.glow-accent {
  box-shadow: 0 0 25px rgba(96, 165, 250, 0.35), 0 0 50px rgba(96, 165, 250, 0.2);
}

.glow-blue {
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.35), 0 0 50px rgba(59, 130, 246, 0.2);
}

/* Brand animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-glow {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Scrollbar styling is consolidated in the single block below (~line 1105) */

/* Typography scale classes */
.text-display {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.text-h2 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.25;
}

.text-h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.text-body-lg {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.7;
}

.text-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
}

.text-body-sm {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ═══════════════════════════════════════════════════════════════════════════════
   SMOOTH REFRESH ANIMATIONS
   CSS-only animations for price changes (no layout shift)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Flash animation for price increases */
.flash-green {
  animation: flashGreen 0.5s ease-out;
}

/* Flash animation for price decreases */
.flash-red {
  animation: flashRed 0.5s ease-out;
}

/* Subtle pulse for data updates */
.data-updated {
  animation: dataUpdated 0.3s ease-out;
}

@keyframes flashGreen {
  0%, 100% { background-color: transparent; }
  30% { background-color: hsl(var(--success) / 0.15); }
}

@keyframes flashRed {
  0%, 100% { background-color: transparent; }
  30% { background-color: hsl(var(--destructive) / 0.15); }
}

@keyframes dataUpdated {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLL MECHANISM - INDUSTRY STANDARD
   Ensures smooth, consistent scrolling across all input methods (mouse, trackpad, touch)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Canonical scroll settings (single source of truth) ── */
html {
  overflow-x: clip !important;
  overflow-y: auto;
  /* No scroll-behavior: smooth — opt-in per-call only */
  scroll-padding-top: 80px;
  overscroll-behavior-x: none; /* prevent horizontal bounce only */
  max-width: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip !important;
  max-width: 100%;
  width: 100%;
  overflow-y: auto;
  touch-action: manipulation;
  overscroll-behavior-x: none; /* prevent horizontal bounce only */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#root {
  overflow-x: clip; /* standardised — same as html/body */
  max-width: 100%;
  width: 100%;
}

/* iOS momentum scrolling for all scrollable containers */
.scroll-container {
  -webkit-overflow-scrolling: touch;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Enhanced scrollbar interaction states */
::-webkit-scrollbar-thumb:active {
  background: rgba(96, 165, 250, 0.7);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:active {
  background: rgba(13, 34, 60, 0.5);
}

/* Responsive container utilities */
.container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

/* Cross-browser touch action optimization */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent text selection on interactive elements */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Fluid typography helpers */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLS PREVENTION - Reserve space for dynamic content
   Prevents layout shifts from async-loaded components
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Reserve space for card sections that load async data */
.cls-reserve-card-sm {
  min-height: var(--min-h-card-sm, 80px);
}

.cls-reserve-card-md {
  min-height: var(--min-h-card-md, 120px);
}

.cls-reserve-card-lg {
  min-height: var(--min-h-card-lg, 166px);
}

.cls-reserve-share {
  min-height: var(--min-h-share-section, 66px);
}

/* Navigation CLS prevention - ensure consistent height */
nav {
  min-height: 36px; /* Match the nav height from CLS report */
}

/* Safe area insets for notched devices */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-left {
  padding-left: env(safe-area-inset-left, 0px);
}

.safe-right {
  padding-right: env(safe-area-inset-right, 0px);
}

/* iOS Capacitor: sticky headers must clear the native status bar */
/* Applied via viewport-fit=cover — content extends under the status bar */
.sticky-safe-top {
  position: sticky;
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Touch-friendly minimum sizes */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

@media (pointer: coarse) {
  .touch-target-auto {
    min-height: 48px;
    min-width: 48px;
  }

  /* Expands the TAP AREA to 44x44 on touch devices without changing the
     element's visual size or the surrounding layout. Used for the small
     inline info icons that live inside dense text rows. */
  .tap-area-44 {
    position: relative;
  }

  .tap-area-44::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    /* Sits BEHIND the trigger's own children so it only extends the hit area
       around them. Without this it swallowed taps meant for a button inside
       the trigger (e.g. the win-bell FAB), so the tooltip opened but the
       dialog never did. */
    z-index: -1;
  }

  /* Fundamental Intelligence Reading lens trigger: keeps its small visual
     ring but gains a 44x44 tap area on touch devices. */
  .fir-lens-trigger {
    position: relative;
  }

  .fir-lens-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}


/* ===== Mobile-centered popovers =====
   Radix owns the popper wrapper's transform, which creates a containing block,
   so a `fixed` child would still be anchored to the trigger. Below 480px we
   flatten the wrapper into a full-screen flex container and center the card. */
@media (max-width: 479px) {
  [data-radix-popper-content-wrapper]:has(> [data-mobile-centered]) {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
  }
}

/* ===== Tooltip layering =====
   The bubble itself must stay inside the Radix popper wrapper (removing that
   would break collision detection), so the layer is applied to the wrapper. */
[data-radix-popper-content-wrapper]:has(> [data-tooltip-content]) {
  z-index: var(--z-tooltip) !important;
}



/* Shadcn compatibility - INHERITS FROM brand-system.css */
/* All CSS variables are now defined in brand-system.css as single source of truth */
/* This section only contains overrides if needed */

/* Light mode specific component fixes */
[data-theme="light"] .glass,
[data-theme="light"] .glass-card,
[data-theme="light"] .premium-card {
  border-color: hsl(216 30% 90%);
  box-shadow: 0 2px 8px hsl(216 30% 60% / 0.06), 0 8px 24px hsl(216 30% 60% / 0.04);
}

[data-theme="light"] .stat-card {
  background: hsl(0 0% 100%);
  border-color: hsl(216 30% 90%);
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] [role="combobox"] {
  border-color: hsl(216 30% 78%);
  background: hsl(0 0% 100%);
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] [role="combobox"]:focus {
  border-color: hsl(227 90% 50%);
  box-shadow: 0 0 0 3px hsl(227 90% 50% / 0.15);
}

/* Light mode button outlines */
[data-theme="light"] button:focus-visible,
[data-theme="light"] [role="button"]:focus-visible {
  outline: 2px solid hsl(227 90% 45%);
  outline-offset: 2px;
}

/* Light mode card and container borders */
[data-theme="light"] [class*="border-border"] {
  border-color: hsl(216 30% 90%);
}

/* Light mode dividers */
[data-theme="light"] .divider-premium {
  background: linear-gradient(90deg, transparent, hsl(216 30% 75%), transparent);
}

/* Light mode text visibility improvements */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: hsl(216 50% 10%);
}

[data-theme="light"] .text-foreground {
  color: hsl(216 50% 12%);
}

[data-theme="light"] .text-muted-foreground {
  color: hsl(216 25% 40%);
}

/* Light mode shadow improvements for cards */
[data-theme="light"] .shadow-sm {
  box-shadow: 0 1px 2px hsl(216 30% 50% / 0.1);
}

[data-theme="light"] .shadow-md {
  box-shadow: 0 4px 6px -1px hsl(216 30% 50% / 0.1), 0 2px 4px -2px hsl(216 30% 50% / 0.1);
}

[data-theme="light"] .shadow-lg {
  box-shadow: 0 10px 15px -3px hsl(216 30% 50% / 0.1), 0 4px 6px -4px hsl(216 30% 50% / 0.1);
}

@layer base {
  * {
    @apply border-border;
  }
  
  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-image: var(--neural-pattern);
    background-size: 100% 100%;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    letter-spacing: -0.011em;
  }
  
  /* Premium Typography - Apple-level refinement */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-feature-settings: 'cv11', 'ss01';
  }
  
  h1 { 
    font-size: clamp(2.75rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
  }
  
  h2 { 
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.03em;
  }
  
  h3 { 
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.025em;
  }
  
  p {
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: -0.011em;
  }
  
  /* Premium focus states */
  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }
}

/* Premium Components */
@layer components {
  /* Hover effects */
  .hover-scale {
    @apply transition-transform duration-300 ease-out;
  }
  
  .hover-scale:hover {
    transform: scale(1.02);
  }
  
  /* Premium Card - smooth glass, no visible borders */
  .premium-card {
    @apply bg-card/80 rounded-2xl;
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.04), 0 8px 32px hsl(var(--primary) / 0.06);
    backdrop-filter: blur(32px) saturate(180%);
    transition: var(--transition-premium);
  }
  
  .premium-card:hover {
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.08), 0 12px 48px hsl(var(--primary) / 0.1);
    transform: translateY(-2px);
  }
  
  /* Glass effect - clean, no visible border */
  .glass {
    background: hsl(var(--background) / 0.7);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.04), 0 8px 32px hsl(var(--primary) / 0.05);
  }
  
  /* AI Badge - Refined */
  .ai-badge {
    @apply px-3 py-1.5 rounded-full text-xs font-medium tracking-wide;
    background: hsl(var(--primary) / 0.08);
    color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary) / 0.15);
  }
  
  /* Neural glow */
  .neural-glow {
    box-shadow: var(--shadow-neural);
  }
  
  /* Premium button */
  .btn-premium {
    @apply px-8 py-4 rounded-xl font-semibold text-base tracking-tight;
    @apply transition-all duration-300 ease-out;
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-md), 0 0 0 0 hsl(var(--primary) / 0);
  }
  
  .btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 40px hsl(var(--primary) / 0.25);
  }
  
  .btn-premium:active {
    transform: translateY(0);
  }
  
  /* Professional button variant */
  .btn-professional {
    @apply px-6 py-3 rounded-xl font-medium tracking-tight;
    @apply transition-all duration-200 ease-out;
    background: var(--gradient-primary);
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-sm);
  }
  
  .btn-professional:hover {
    box-shadow: var(--shadow-md), 0 0 30px hsl(var(--primary) / 0.2);
    transform: translateY(-1px);
  }
  
  /* Stat card - Premium smooth glass */
  .stat-card {
    @apply text-center p-6 rounded-2xl;
    background: hsl(var(--muted) / 0.35);
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.04), 0 4px 16px hsl(var(--primary) / 0.04);
    backdrop-filter: blur(16px);
    transition: var(--transition-base);
  }
  
  .stat-card:hover {
    background: hsl(var(--muted) / 0.5);
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.06), 0 8px 24px hsl(var(--primary) / 0.08);
    transform: translateY(-2px);
  }
  
  /* Section backgrounds */
  .section-premium {
    background: var(--gradient-hero);
    position: relative;
  }
  
  .section-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--neural-pattern);
    pointer-events: none;
  }
  
  /* Text gradient */
  .text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  /* Divider */
  .divider-premium {
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
  }
  
  /* Glassmorphism Cards - Ultra-smooth, borderless glass */
  .glass-card {
    @apply bg-card/70 backdrop-blur-xl rounded-2xl;
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.04), 0 8px 32px hsl(var(--primary) / 0.05);
  }
  
  .glass-card-glow {
    @apply bg-card/70 backdrop-blur-xl rounded-2xl;
    box-shadow: 0 0 0 1px hsl(var(--accent) / 0.08), 0 0 40px hsl(var(--accent) / 0.08), 0 8px 32px hsl(var(--primary) / 0.06);
  }
  
  .glass-card-neon {
    @apply bg-card/70 backdrop-blur-xl rounded-2xl;
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08), 0 0 30px hsl(var(--primary) / 0.06), 0 8px 32px hsl(var(--primary) / 0.05);
  }
  
  .glass-card-holographic {
    @apply backdrop-blur-xl rounded-2xl;
    background: linear-gradient(135deg, hsl(var(--card) / 0.8) 0%, hsl(var(--accent) / 0.02) 50%, hsl(var(--card) / 0.8) 100%);
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.04), 0 8px 32px hsl(var(--primary) / 0.05);
  }
  
  /* New ultra-smooth glass utility class */
  .glass-smooth {
    background: hsl(var(--card) / 0.6);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    box-shadow: 0 0 0 1px hsl(var(--border) / 0.03), 0 8px 32px hsl(var(--primary) / 0.04);
    border: none;
  }
  
  /* ===== GATED OVERLAY GLASSMORPHISM ===== */
  /* Refined glass for access-gated content overlays */
  .glass-gated-overlay {
    background: hsl(var(--glass-overlay-bg));
    backdrop-filter: var(--blur-gated) saturate(150%);
    -webkit-backdrop-filter: var(--blur-gated) saturate(150%);
    box-shadow: 
      0 0 0 1px hsl(var(--glass-overlay-border)),
      0 8px 40px hsl(var(--background) / 0.4);
    border-radius: var(--radius-lg);
  }
  
  /* Glass panel for gated content cards */
  .glass-gated-panel {
    background: hsl(var(--glass-panel-bg));
    backdrop-filter: var(--blur-lg) saturate(160%);
    -webkit-backdrop-filter: var(--blur-lg) saturate(160%);
    box-shadow: 
      0 0 0 1px hsl(var(--glass-panel-border)),
      0 4px 24px hsl(var(--background) / 0.3),
      0 0 60px hsl(var(--primary) / 0.03);
    border-radius: var(--radius-xl);
  }
  
  /* Soft frosted dialog/modal for explainers */
  .glass-dialog {
    background: hsl(var(--card) / 0.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 
      0 0 0 1px hsl(var(--border) / 0.06),
      0 24px 80px hsl(var(--background) / 0.6),
      0 0 80px hsl(var(--primary) / 0.04);
    border-radius: var(--radius-xl);
  }
  
  /* Share/invite sheet glass styling */
  .glass-sheet {
    background: hsl(var(--card) / 0.88);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 
      0 0 0 1px hsl(var(--border) / 0.05),
      0 -12px 48px hsl(var(--background) / 0.5),
      0 12px 48px hsl(var(--primary) / 0.06);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  
  /* Progress tier card glass */
  .glass-tier-card {
    background: hsl(var(--card) / 0.65);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 
      0 0 0 1px hsl(var(--border) / 0.04),
      0 8px 32px hsl(var(--primary) / 0.05);
    border-radius: var(--radius-lg);
  }
  
  /* Subtle text emphasis */
  .text-neon {
    text-shadow: 0 0 10px hsl(var(--primary) / 0.15);
  }
  
  /* Subtle drop shadow for icons */
  .drop-shadow-glow {
    filter: drop-shadow(0 0 4px hsl(var(--primary) / 0.2));
  }
  
  /* Icon container with subtle glow */
  .icon-glow-container {
    @apply p-2.5 rounded-full;
    background: hsl(var(--primary) / 0.08);
    box-shadow: 0 0 20px hsl(var(--primary) / 0.1);
  }
  
  /* Calm typography for gated content */
  .text-calm-title {
    @apply text-sm font-medium tracking-tight;
    color: hsl(var(--foreground));
  }
  
  .text-calm-body {
    @apply text-xs leading-relaxed;
    color: hsl(var(--muted-foreground));
  }
}

/* Mobile Optimizations */
@layer utilities {
  .mobile-optimized {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .ios-optimized {
    -webkit-overflow-scrolling: touch;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    transform: translate3d(0, 0, 0);
  }
  
  .touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .no-tap-highlight {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Premium Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.5;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-up {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 4s ease-in-out infinite;
}

.animate-scroll {
  animation: scroll 30s linear infinite;
}

/* Phase 9: Magic Experience Animations */
@keyframes gradient-shift {
  0%, 100% { opacity: 0.3; background-position: 0% 50%; }
  50% { opacity: 0.5; background-position: 100% 50%; }
}

@keyframes gradient-text {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes float-particle {
  0% { 
    transform: translateY(100vh) translateX(0px) scale(0); 
    opacity: 0; 
  }
  10% { 
    opacity: 0.8; 
    transform: translateY(90vh) translateX(10px) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(50vh) translateX(-20px) scale(1.2);
  }
  90% { 
    opacity: 0.6; 
    transform: translateY(10vh) translateX(30px) scale(0.8);
  }
  100% { 
    transform: translateY(-10vh) translateX(0px) scale(0); 
    opacity: 0; 
  }
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease-in-out infinite;
}

.animate-gradient-text {
  background-size: 200% auto;
  animation: gradient-text 3s ease-in-out infinite;
}

.animate-float-particle {
  animation: float-particle 12s ease-in-out infinite;
}

/* Selection styling */
::selection {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--foreground));
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Grid pattern */
.bg-grid-pattern {
  background-image: var(--grid-pattern);
  background-size: 60px 60px;
}

/* Sparkle burst animation for celebrations */
@keyframes sparkle-burst {
  0% {
    opacity: 1;
    transform: rotate(var(--rotation, 0deg)) translateY(0) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(var(--rotation, 0deg)) translateY(-16px) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--rotation, 0deg)) translateY(-24px) scale(0);
  }
}

/* Print Styles for PDF Export */
@media print {
  /* Reset backgrounds and colors for print */
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 40%;
    --border: 0 0% 85%;
  }
  
  body {
    background: white !important;
    background-image: none !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.4;
  }
  
  /* Hide non-essential elements */
  .print\\:hidden,
  header.print\\:hidden,
  button,
  nav {
    display: none !important;
  }
  
  /* Page setup */
  @page {
    size: A4;
    margin: 1.5cm 2cm;
  }
  
  /* Page breaks */
  .print\\:page-break-before {
    page-break-before: always;
  }
  
  .print\\:page-break-after {
    page-break-after: always;
  }
  
  /* Avoid breaking inside cards */
  .card,
  section,
  table {
    page-break-inside: avoid;
  }
  
  /* Reset shadows and complex styles */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure code blocks are readable */
  pre, code {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    font-size: 9pt;
    overflow: visible !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
  }
  
  /* Links */
  a {
    color: black !important;
    text-decoration: underline;
  }
  
  /* Tables */
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
  }
  
  /* Ensure cards have borders */
  .card {
    border: 1px solid #ddd !important;
    background: white !important;
  }
  
  /* Headers */
  h1, h2, h3, h4 {
    color: black !important;
    page-break-after: avoid;
  }
  
  /* Remove gradients */
  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: black !important;
  }
  
  /* Status colors - ensure visibility in print */
  .text-green-500 { color: #16a34a !important; }
  .text-red-500 { color: #dc2626 !important; }
  .text-yellow-500 { color: #ca8a04 !important; }
  .text-primary { color: #2563eb !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM CALM DESIGN SYSTEM - Light/Dark Mode Support
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Light mode theme adjustments */
[data-theme="light"] {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --muted: 210 20% 98%;
  --muted-foreground: 220 9% 46%;
  --border: 220 14% 91%;
}

[data-theme="light"] body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

[data-theme="light"] .text-white {
  color: hsl(222 47% 11%) !important;
}

[data-theme="light"] .text-white\/80 {
  color: hsl(215 25% 27%) !important;
}

[data-theme="light"] .text-white\/70 {
  color: hsl(220 9% 46%) !important;
}

[data-theme="light"] .text-white\/60 {
  color: hsl(220 9% 46%) !important;
}

[data-theme="light"] .text-white\/50 {
  color: hsl(218 11% 55%) !important;
}

[data-theme="light"] .text-white\/40 {
  color: hsl(218 11% 65%) !important;
}

[data-theme="light"] .bg-white\/5 {
  background: hsl(0 0% 0% / 0.03) !important;
}

[data-theme="light"] .bg-white\/8 {
  background: hsl(0 0% 0% / 0.05) !important;
}

[data-theme="light"] .bg-white\/10 {
  background: hsl(0 0% 0% / 0.06) !important;
}

[data-theme="light"] .bg-white\/15 {
  background: hsl(0 0% 0% / 0.08) !important;
}

[data-theme="light"] .border-white\/10 {
  border-color: hsl(0 0% 0% / 0.1) !important;
}

[data-theme="light"] .border-white\/20 {
  border-color: hsl(0 0% 0% / 0.15) !important;
}

[data-theme="light"] .border-white\/30 {
  border-color: hsl(0 0% 0% / 0.2) !important;
}

[data-theme="light"] .hover\:bg-white\/10:hover {
  background: hsl(0 0% 0% / 0.06) !important;
}

[data-theme="light"] .hover\:border-white\/20:hover {
  border-color: hsl(0 0% 0% / 0.15) !important;
}

[data-theme="light"] .focus\:ring-white\/20:focus {
  --tw-ring-color: hsl(0 0% 0% / 0.15) !important;
}

[data-theme="light"] .focus\:border-white\/30:focus {
  border-color: hsl(0 0% 0% / 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM - Calm Hierarchy
   ═══════════════════════════════════════════════════════════════════════════════ */

.text-display {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.text-heading-1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.text-heading-2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 600;
}

.text-heading-3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 600;
}

.text-body-lg {
  font-size: 1.125rem;
  line-height: 1.75;
  font-weight: 400;
}

.text-body {
  font-size: 1rem;
  line-height: 1.625;
  font-weight: 400;
}

.text-body-sm {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}

.text-caption {
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ===== DIALOG/MODAL CROSS-PLATFORM FIXES ===== */
/* Ensure dialogs are properly centered on all platforms including iOS Safari */
[data-radix-dialog-overlay] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  [data-radix-dialog-content] {
    /* Use safe-area-inset for iOS devices with notch */
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
  }
}

/* iPad specific centering fixes */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-radix-dialog-content] {
    /* Ensure iPads also get proper centering */
    margin: auto;
  }
}

/* Prevent body scroll when dialog is open - cross-platform */
body[data-scroll-locked] {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  /* Preserve scroll position */
  top: calc(var(--scroll-y, 0) * -1);
}

/* ===== SPEED INDEX OPTIMIZATION ===== */
/* content-visibility: auto skips rendering of off-screen content */
/* This dramatically improves Speed Index by deferring paint work */
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Smaller sections get smaller intrinsic size hint */
.content-visibility-auto-sm {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* Larger sections like animations */
.content-visibility-auto-lg {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ===== FORCED REFLOW MITIGATION ===== */
/* Isolate layout calculations to prevent cascade reflows */
.contain-layout {
  contain: layout;
}

/* contain: layout removed from animated elements — breaks iOS touch events in WKWebView */

/* Cards and interactive components - isolate style/layout */
.card,
.asset-card,
[role="dialog"],
[role="menu"] {
  contain: layout style;
}

/* ===== TOUCH OPTIMIZATION (static, no runtime DOM injection) ===== */
a, button, [role="button"], .clickable {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

nav, .nav-link, .btn {
  -webkit-user-select: none;
  user-select: none;
}

.scroll-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@keyframes winBellProgress {
  from { width: 100%; }
  to { width: 0%; }
}