GMW/services/frontend/src/app/globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  /* Canvas — deep navy */
  --color-canvas: oklch(0.07 0.015 250);
  --color-surface: oklch(0.11 0.02 245 / 0.6);
  --color-surface-hover: oklch(0.15 0.02 245 / 0.7);

  /* Glass */
  --color-glass-bg: oklch(1 0 0 / 0.04);
  --color-glass-border: oklch(1 0 0 / 0.08);
  --glass-shadow: 0 8px 32px oklch(0 0 0 / 0.4);

  /* Primary — teal-cyan */
  --color-primary: oklch(0.62 0.17 215);
  --color-primary-glow: oklch(0.62 0.17 215 / 0.4);
  --color-primary-foreground: oklch(0.98 0 0);
  --color-border: oklch(1 0 0 / 0.06);
  --color-border-glow: oklch(0.62 0.17 215 / 0.3);

  /* Accents */
  --color-accent-purple: oklch(0.65 0.2 280);
  --color-accent-amber: oklch(0.7 0.17 75);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-success: oklch(0.6 0.18 160);

  /* Text */
  --color-text-primary: oklch(0.93 0.01 245);
  --color-text-secondary: oklch(0.55 0.02 245);
  --color-text-mono: oklch(0.62 0.17 215);

  /* Legacy overrides for shadcn compatibility */
  --color-background: var(--color-canvas);
  --color-foreground: var(--color-text-primary);
  --color-card: var(--color-surface);
  --color-card-foreground: var(--color-text-primary);
  --color-muted: oklch(0.17 0.015 245);
  --color-muted-foreground: var(--color-text-secondary);
  --color-accent: var(--color-primary);
  --color-accent-foreground: var(--color-primary-foreground);

  /* Ring / focus outline for shadcn outline-ring utility */
  --color-ring: var(--color-primary);

  /* Radius */
  --radius-card: 16px;
  --radius-panel: 12px;
  --radius-control: 8px;
  --radius-pill: 9999px;
  --radius: 0.625rem; /* shadcn compat */

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

@layer utilities {
  .glass {
    background: var(--color-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    box-shadow: var(--glass-shadow);
  }
  .glass-elevated {
    background: var(--color-glass-bg);
    backdrop-filter: blur(16px);
    border: 1px solid var(--color-border-glow);
    box-shadow: 0 8px 32px oklch(0 0 0 / 0.5), 0 0 20px var(--color-primary-glow);
  }
  .glass-intense {
    background: oklch(1 0 0 / 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid oklch(1 0 0 / 0.12);
  }
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-canvas text-text-primary font-sans antialiased;
    background-image:
      radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px),
      radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.62 0.17 215 / 0.06), transparent),
      radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
    background-size: 24px 24px, 100% 100%, 100% 100%;
  }
  html {
    @apply font-sans scroll-smooth;
  }

  /* Custom selection color */
  ::selection {
    background: oklch(0.62 0.17 215 / 0.4);
    color: inherit;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: oklch(1 0 0 / 0.1);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: oklch(1 0 0 / 0.2);
  }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: oklch(1 0 0 / 0.1); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.2); }
}

/* ── Animations ──────────────────────────── */

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

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

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

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

.animate-pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Utility classes ─────────────────────── */

/* Gradient text */
.text-gradient {
  background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient border (via pseudo-element trick) */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Live pulse ring (compat alias) */
.live-pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}