flvx/vite-frontend/src/styles/globals.css

@import "tailwindcss";
@import "./tailwind-theme.pcss";
@plugin "tailwindcss-animate";

/* GPU acceleration helper - prevents font blurriness during transforms */
.gpu-accelerated {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  --background: #f6f7fb;
  --foreground: #111827;
  --border: #e5e7eb;
  --input: #d1d5db;
  --ring: #93c5fd;

  --content1: #ffffff;
  --divider: #e5e7eb;

  --default-50: #f9fafb;
  --default-100: #f3f4f6;
  --default-200: #e5e7eb;
  --default-300: #d1d5db;
  --default-400: #9ca3af;
  --default-500: #6b7280;
  --default-600: #4b5563;
  --default-700: #374151;
  --default-800: #1f2937;
  --default-900: #111827;

  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  --secondary-50: #eef2ff;
  --secondary-100: #e0e7ff;
  --secondary-200: #c7d2fe;
  --secondary-300: #a5b4fc;
  --secondary-400: #818cf8;
  --secondary-500: #6366f1;
  --secondary-600: #4f46e5;
  --secondary-700: #4338ca;
  --secondary-800: #3730a3;
  --secondary-900: #312e81;

  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;

  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #6366f1;
  --secondary-foreground: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
}

.dark {
  --background: #0b1020;
  --foreground: #f3f4f6;
  --border: #334155;
  --input: #475569;
  --ring: #60a5fa;

  --content1: #111827;
  --divider: #334155;

  --default-50: #0f172a;
  --default-100: #1e293b;
  --default-200: #334155;
  --default-300: #475569;
  --default-400: #64748b;
  --default-500: #94a3b8;
  --default-600: #cbd5e1;
  --default-700: #e2e8f0;
  --default-800: #f1f5f9;
  --default-900: #f8fafc;

  --primary: #3b82f6;
  --secondary: #818cf8;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
}

html,
body {
  background: var(--background);
  color: var(--foreground);
  height: 100%;
  overflow-x: hidden;
}

.safe-top {
  padding-top: var(--safe-area-top);
}

.safe-bottom {
  padding-bottom: var(--safe-area-bottom);
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-tiny {
  font-size: 0.75rem;
  line-height: 1rem;
}

@supports (height: 100dvh) {
  .h-screen {
    height: 100dvh;
  }

  .min-h-screen {
    min-height: 100dvh;
  }
}

@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }

  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}

@media (max-width: 768px) {
  * {
    -webkit-overflow-scrolling: touch;
  }

  body {
    overscroll-behavior-y: none;
  }
}

.captcha-modal-enter {
  animation: captchaModalIn 0.3s ease-out forwards;
}

@keyframes captchaModalIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.captcha-backdrop-enter {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Liquid Glass Variables */
:root {
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-card: rgba(255, 255, 255, 0.7);
  --glass-overlay: rgba(0, 0, 0, 0.3);
}

.dark {
  --glass-bg: rgba(30, 30, 30, 0.6);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-card: rgba(40, 40, 40, 0.6);
}

.bg-mesh-gradient {
  background-color: #f2f2f7;
  position: relative;
  z-index: 0;
}

.bg-mesh-gradient::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/images/bg-light.jpg') no-repeat center center;
  background-size: cover;
}

.dark .bg-mesh-gradient {
  background-color: #0b1020;
}

.dark .bg-mesh-gradient::before {
  background: url('/images/bg-dark.jpg') no-repeat center center;
  background-size: cover;
}

:root.has-theme-bg .bg-mesh-gradient {
  background-image: none !important;
  background-color: #f6f7fb !important;
}

:root.dark.has-theme-bg .bg-mesh-gradient {
  background-color: #0b1020 !important;
}

:root.has-theme-bg .bg-mesh-gradient::before {
  background-image: none !important;
}

:root.has-custom-bg .bg-mesh-gradient {
  background-image: none !important;
  background-color: var(--custom-bg-color, transparent) !important;
}

:root.has-custom-bg .bg-mesh-gradient::before {
  background-image: var(--custom-bg-image, none) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@layer utilities {
  .scrollbar-hide {
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}