/* ============================================
   Financer — Shared Design Tokens
   Used by both the landing page and the app.
   Source of truth: globals.css (app)
   ============================================ */

/* --- CSS Custom Properties (Dark = Default) --- */
:root {
  --background: 240 8% 5%;
  --background-surface: 240 6% 10%;
  --background-surface-hover: 210 24% 16%;

  --foreground: 0 0% 90%;
  --foreground-secondary: 218 11% 65%;
  --foreground-disabled: 220 9% 46%;
  --foreground-inverse: 240 8% 5%;

  --primary: 217 91% 60%;
  --primary-hover: 217 83% 53%;
  --primary-active: 224 76% 48%;
  --primary-foreground: 0 0% 100%;

  --secondary: 258 90% 66%;
  --secondary-hover: 262 83% 58%;

  --border: 240 5% 17%;
  --radius: 0.75rem;

  --success: 142 71% 45%;
  --error: 0 84% 60%;

  /* Glass Effects */
  --glass-bg: 240 6% 10% / 0.6;
  --glass-bg-elevated: 240 6% 12% / 0.8;
  --glass-border: 0 0% 100% / 0.1;
  --glass-blur: 12px;
  --glass-blur-heavy: 20px;
  --glow-primary: 217 91% 60% / 0.15;
}

/* Mobile: Reduced blur for performance */
@media (max-width: 768px) {
  :root {
    --glass-blur: 8px;
    --glass-blur-heavy: 12px;
  }
}

/* Light Theme */
.light {
  --background: 0 0% 98%;
  --background-surface: 0 0% 100%;
  --background-surface-hover: 220 14% 96%;

  --foreground: 222 47% 11%;
  --foreground-secondary: 215 16% 47%;
  --foreground-disabled: 215 20% 65%;
  --foreground-inverse: 0 0% 100%;

  --primary: 217 91% 55%;
  --primary-hover: 217 83% 48%;
  --primary-active: 224 76% 43%;

  --secondary: 258 90% 60%;
  --secondary-hover: 262 83% 52%;

  --border: 220 13% 87%;

  --success: 142 71% 40%;
  --error: 0 84% 55%;

  /* Glass Effects - Light */
  --glass-bg: 0 0% 100% / 0.7;
  --glass-bg-elevated: 0 0% 100% / 0.9;
  --glass-border: 220 13% 87% / 0.8;
  --glow-primary: 217 91% 55% / 0.1;
}

/* --- Glass Utilities --- */
.glass-card {
  background: hsl(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid hsl(var(--glass-border));
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

.glass-card:hover {
  background: hsl(240 6% 12% / 0.7);
  border-color: hsl(0 0% 100% / 0.15);
}

.light .glass-card:hover {
  background: hsl(0 0% 100% / 0.85);
  border-color: hsl(220 13% 80%);
}

.glass-card-elevated {
  background: hsl(var(--glass-bg-elevated));
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid hsl(var(--glass-border));
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.light .glass-card-elevated {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-nav {
  background: hsl(var(--glass-bg));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid hsl(var(--glass-border));
}

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

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

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

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--foreground-disabled));
}