@import "tailwindcss";

/* Bloomberg-style theme matching React version exactly (OKLCH color space) */
:root {
  /* Updated theme to match financial trading app aesthetic with green accents */
  --background: oklch(0.98 0.005 106.47);
  --foreground: oklch(0.15 0.01 106.47);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 106.47);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 106.47);
  --primary: oklch(0.47 0.13 142.5);
  --primary-foreground: oklch(0.98 0.005 106.47);
  --secondary: oklch(0.96 0.01 106.47);
  --secondary-foreground: oklch(0.15 0.01 106.47);
  --muted: oklch(0.96 0.01 106.47);
  --muted-foreground: oklch(0.45 0.01 106.47);
  --accent: oklch(0.47 0.13 142.5);
  --accent-foreground: oklch(0.98 0.005 106.47);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0.005 106.47);
  --border: oklch(0.92 0.01 106.47);
  --input: oklch(0.92 0.01 106.47);
  --ring: oklch(0.47 0.13 142.5);
  --success: oklch(0.47 0.13 142.5);
  --success-foreground: oklch(0.98 0.005 106.47);
  --warning: oklch(0.65 0.15 85.87);
  --warning-foreground: oklch(0.15 0.01 106.47);
  --chart-1: oklch(0.47 0.13 142.5);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

  /* Font variables for Geist Sans and Mono */
  --font-geist-sans: "Inter", "system-ui", "sans-serif";
  --font-geist-mono: "JetBrains Mono", "Consolas", "monospace";
}

.dark {
  --background: oklch(0.08 0.005 106.47);
  --foreground: oklch(0.95 0.005 106.47);
  --card: oklch(0.12 0.005 106.47);
  --card-foreground: oklch(0.95 0.005 106.47);
  --popover: oklch(0.12 0.005 106.47);
  --popover-foreground: oklch(0.95 0.005 106.47);
  --primary: oklch(0.55 0.15 142.5);
  --primary-foreground: oklch(0.08 0.005 106.47);
  --secondary: oklch(0.18 0.005 106.47);
  --secondary-foreground: oklch(0.95 0.005 106.47);
  --muted: oklch(0.18 0.005 106.47);
  --muted-foreground: oklch(0.65 0.005 106.47);
  --accent: oklch(0.55 0.15 142.5);
  --accent-foreground: oklch(0.08 0.005 106.47);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.95 0.005 106.47);
  --border: oklch(0.18 0.005 106.47);
  --input: oklch(0.18 0.005 106.47);
  --ring: oklch(0.55 0.15 142.5);
  --success: oklch(0.55 0.15 142.5);
  --success-foreground: oklch(0.08 0.005 106.47);
  --warning: oklch(0.65 0.15 85.87);
  --warning-foreground: oklch(0.08 0.005 106.47);
  --chart-1: oklch(0.55 0.15 142.5);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  /* Added mobile bottom navigation spacing */
  @media (max-width: 768px) {
    body {
      /* Add bottom padding for mobile nav, using a larger value and including safe area */
      padding-bottom: calc(6rem + env(safe-area-inset-bottom));
    }
  }

  /* Safe area support for mobile devices */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Bloomberg-style input styling */
.form-input {
  @apply h-12 bg-background border-border focus:border-primary focus:ring-primary rounded-lg px-4;
}

/* Card styling matching React version */
.card-shadow {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
}

/* Button loading animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Modern landing page animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in-down {
  animation: fade-in-down 0.6s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* Grid pattern background */
.bg-grid-white\/\[0\.02\] {
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}