GMW/services/frontend/src/styles.css

@import "tailwindcss";

@layer base {
  /* ── Light theme (default) ───────────────────────────────────────────── */
  :root {
    --background: 1 0 0;
    --foreground: 0.141 0.005 285.823;
    --card: 1 0 0;
    --card-foreground: 0.141 0.005 285.823;
    --primary: 0.623 0.214 259.815;
    --primary-soft: 0.92 0.04 259.815;
    --primary-foreground: 0.97 0.014 254.604;
    --secondary: 0.967 0.001 286.375;
    --secondary-foreground: 0.21 0.006 285.885;
    --muted: 0.967 0.001 286.375;
    --muted-foreground: 0.552 0.016 285.938;
    --accent: 0.967 0.001 286.375;
    --accent-foreground: 0.21 0.006 285.885;
    --destructive: 0.577 0.245 27.325;
    --destructive-foreground: 0.97 0.014 254.604;
    --border: 0.92 0.004 286.32;
    --input: 0.92 0.004 286.32;
    --ring: 0.623 0.214 259.815;
    --radius: 1rem;
    --primary-glow: 0.623 0.214 259.815 / 0.15;
    --accent-glow: 0.552 0.016 285.938 / 0.15;
    --card-shadow: 0.92 0.004 286.32 / 0.3;
    --particle-primary: 0.623 0.214 259.815 / 0.1;
    --particle-secondary: 0.552 0.016 285.938 / 0.1;
    --brand-gradient-from: var(--primary);
    --brand-gradient-to: 0.623 0.2 200;
    --scrollbar-track: 0.967 0.001 286.375;
    --scrollbar-thumb: 0.92 0.004 286.32;
  }

  /* ── Dark theme ──────────────────────────────────────────────────────── */
  [data-theme="dark"] {
    --background: 0.147 0.004 285.823;
    --foreground: 0.92 0.004 286.32;
    --card: 0.162 0.008 286.034;
    --card-foreground: 0.92 0.004 286.32;
    --primary: 0.623 0.214 259.815;
    --primary-soft: 0.3 0.04 259.815;
    --primary-foreground: 0.97 0.014 254.604;
    --secondary: 0.2 0.008 286.034;
    --secondary-foreground: 0.85 0.008 286.034;
    --muted: 0.2 0.008 286.034;
    --muted-foreground: 0.6 0.016 285.938;
    --accent: 0.2 0.008 286.034;
    --accent-foreground: 0.85 0.008 286.034;
    --destructive: 0.577 0.245 27.325;
    --destructive-foreground: 0.97 0.014 254.604;
    --border: 0.25 0.008 286.034;
    --input: 0.25 0.008 286.034;
    --ring: 0.623 0.214 259.815;
    --primary-glow: 0.623 0.214 259.815 / 0.08;
    --accent-glow: 0.552 0.016 285.938 / 0.08;
    --card-shadow: 0 0 0 / 0.5;
    --particle-primary: 0.623 0.214 259.815 / 0.06;
    --particle-secondary: 0.552 0.016 285.938 / 0.06;
    --brand-gradient-from: var(--primary);
    --brand-gradient-to: 0.7 0.2 220;
    --scrollbar-track: 0.147 0.004 285.823;
    --scrollbar-thumb: 0.3 0.008 286.034;
  }

  /* ── Base styles ─────────────────────────────────────────────────────── */
  [data-theme] {
    border-color: oklch(var(--border));
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }

  body {
    background-color: oklch(var(--background));
    color: oklch(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  html,
  body,
  #root {
    min-height: 100%;
  }

  /* ── Scrollbar styling ───────────────────────────────────────────────── */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: oklch(var(--scrollbar-track));
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(var(--scrollbar-thumb));
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(var(--muted-foreground) / 0.5);
  }

  /* ── Focus ring consistency ──────────────────────────────────────────── */
  :focus-visible {
    outline: 2px solid oklch(var(--ring));
    outline-offset: 2px;
  }
}

@layer utilities {
  .glass-card {
    @apply backdrop-blur-sm rounded-xl;
    background-color: oklch(var(--card) / 0.7);
    border: 1px solid oklch(var(--border));
  }

  .grid-pattern {
    background-image:
      linear-gradient(oklch(var(--border) / 0.3) 1px, transparent 1px),
      linear-gradient(90deg, oklch(var(--border) / 0.3) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(to right, oklch(var(--brand-gradient-from)), oklch(var(--brand-gradient-to)));
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out;
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out;
  }
}

@keyframes bar-pulse {
  0%, 100% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(1.2);
  }
}

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animate-bar-pulse {
  animation: bar-pulse 0.4s ease-in-out infinite;
  transform-origin: bottom;
}

.animate-shimmer {
    90deg,
    oklch(var(--border) / 0.5) 0%,
    oklch(var(--muted)) 40%,
    oklch(var(--border) / 0.5) 80%,
    oklch(var(--border) / 0.7) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

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