buildmymcpserver/apps/web/app/globals.css

@import 'tailwindcss';

@theme {
  --color-bg: #0a0a0b;
  --color-bg-elevated: #111114;
  --color-bg-subtle: #16161a;
  --color-fg: #fafafa;
  --color-fg-muted: #a1a1aa;
  --color-fg-subtle: #71717a;
  --color-border: #1f1f22;
  --color-border-strong: #2a2a2e;
  --color-accent: #6366f1;
  --color-accent-fg: #ffffff;
  --color-success: #22c55e;
  --color-warn: #f59e0b;
  --color-danger: #ef4444;
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

@layer base {
  * {
    border-color: var(--color-border);
  }
  html {
    color-scheme: dark;
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Safety net against a stray wide element causing horizontal scroll on
       mobile. `clip` (not `hidden`) does not create a scroll container, so it
       leaves position: sticky intact. */
    overflow-x: clip;
  }
  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01';
  }
  ::selection {
    background: rgba(99, 102, 241, 0.3);
    color: var(--color-fg);
  }
  /* Focus rings */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  /* Force dark native UI for form controls — Chrome popdown otherwise reverts to OS light theme */
  select,
  input,
  textarea,
  button {
    color-scheme: dark;
  }
  /* Style native select arrow + ensure the dropdown popdown uses our dark token */
  select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 26px !important;
  }
  select option {
    background: var(--color-bg-elevated);
    color: var(--color-fg);
  }
  /* Scrollbars */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-fg-subtle);
  }
  /* Textarea resize grip — light hatching on a dark square so it matches the
     theme instead of the OS default (light square with dark hatching). */
  textarea::-webkit-resizer {
    background-color: var(--color-bg);
    background-image: repeating-linear-gradient(
      -45deg,
      var(--color-fg-muted) 0 1px,
      transparent 1px 4px
    );
    border-bottom-right-radius: var(--radius-md);
  }
}

@layer components {
  .panel {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .panel-subtle {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .mono {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
  }
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
  /* A loading spinner reports system status — WCAG treats status indicators as
     an exception to reduced-motion, so keep it spinning after the rule above
     has damped every decorative animation. Same layer + higher specificity
     than the universal selector, so this !important wins. */
  @media (prefers-reduced-motion: reduce) {
    .animate-spin {
      animation-duration: 1s !important;
      animation-iteration-count: infinite !important;
    }
  }
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

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

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

/* Click-pulse for primary actions (see components/pulse.tsx).
   Scales a small indigo dot from 1x to 80x over 650ms — on a 2px base
   that's ~160px max radius, comfortably larger than any button on the
   site. The translate(-50%, -50%) keeps the dot anchored to the click
   point as it grows. Reduced-motion users get an instant fade-out so
   the click action still proceeds without the bloom. */
@keyframes glow-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(80);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes glow-pulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
    }
  }
}