client/src/styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    color-scheme: dark;
    --background: 0 0% 13%;
    --foreground: 0 0% 94%;
    --card: 0 0% 17%;
    --panel: 0 0% 10%;
    --muted: 0 0% 22%;
    --muted-foreground: 0 0% 68%;
    --border: 0 0% 25%;
    --input: 0 0% 28%;
    --accent: 0 0% 8%;
    --accent-foreground: 0 0% 100%;
    --secondary: 0 0% 24%;
    --secondary-foreground: 0 0% 94%;
    --success: 155 62% 45%;
    --warning: 38 92% 54%;
    --danger: 0 75% 60%;
    --ring: 212 90% 60%;
  }

  [data-theme='light'] {
    color-scheme: light;
    --background: 0 0% 100%;
    --foreground: 0 0% 13%;
    --card: 0 0% 100%;
    --panel: 0 0% 97%;
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 42%;
    --border: 0 0% 88%;
    --input: 0 0% 82%;
    --accent: 0 0% 8%;
    --accent-foreground: 0 0% 100%;
    --secondary: 0 0% 94%;
    --secondary-foreground: 0 0% 13%;
    --success: 155 58% 38%;
    --warning: 38 90% 44%;
    --danger: 0 72% 50%;
    --ring: 212 92% 50%;
  }

  * {
    @apply border-border;
    letter-spacing: 0 !important;
  }

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

  html {
    @apply antialiased;
  }

  body {
    @apply overflow-hidden bg-background font-sans text-foreground;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: inherit;
  }

  code,
  pre,
  kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }

  button {
    border-radius: 0.5rem !important;
  }

  ::selection {
    background: hsl(var(--accent) / 0.18);
  }

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

@layer components {
  .app-background {
    background: hsl(var(--background));
  }

  [data-theme='light'] .app-background {
    background: hsl(var(--background));
  }

  .app-background-glow {
    display: none;
  }

  .app-background-grid {
    display: none;
  }

  [data-theme='light'] .app-background-grid {
    opacity: 0.18;
  }

  .brand-gradient {
    background: hsl(var(--accent));
  }

  .text-gradient {
    color: hsl(var(--foreground));
  }

  .surface-card,
  .editorial-card,
  .editorial-surface {
    @apply rounded-lg border border-border bg-card;
  }

  .surface-soft,
  .editorial-card-soft {
    @apply rounded-lg border border-border bg-panel;
  }

  .label-pill,
  .editorial-pill {
    @apply inline-flex items-center rounded-lg border border-border bg-background px-3 py-1 text-[11px] font-medium text-muted-foreground;
  }

  .field {
    @apply border border-input bg-card transition;
  }

  .field:focus-within {
    border-color: hsl(var(--accent) / 0.42);
    box-shadow: 0 0 0 2px hsl(var(--accent) / 0.14);
  }

  .rich-scroll {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
  }

  .rich-scroll::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .rich-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .rich-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: hsl(var(--border));
    background-clip: padding-box;
  }

  .markdown-body {
    @apply space-y-4 break-words text-sm leading-7 text-foreground;
  }

  .markdown-body > :first-child {
    @apply mt-0;
  }

  .markdown-body > :last-child {
    @apply mb-0;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3 {
    @apply font-display font-semibold tracking-tight text-foreground;
  }

  .markdown-body h1 {
    @apply text-2xl;
  }

  .markdown-body h2 {
    @apply text-xl;
  }

  .markdown-body h3 {
    @apply text-lg;
  }

  .markdown-body p,
  .markdown-body ul,
  .markdown-body ol,
  .markdown-body blockquote,
  .markdown-body pre,
  .markdown-body table {
    @apply my-4;
  }

  .markdown-body a {
    @apply font-medium text-accent underline decoration-accent/35 underline-offset-4 transition hover:decoration-accent;
  }

  .markdown-body strong {
    @apply font-semibold text-foreground;
  }

  .markdown-body code:not(pre code) {
    @apply rounded-md bg-secondary px-1.5 py-1 text-[0.85em] text-foreground;
  }

  .markdown-body ul,
  .markdown-body ol {
    @apply pl-6;
  }

  .markdown-body ul {
    @apply list-disc;
  }

  .markdown-body ol {
    @apply list-decimal;
  }

  .markdown-body blockquote {
    @apply rounded-lg border-l-4 border-border bg-secondary px-4 py-3 text-muted-foreground;
  }

  .markdown-body hr {
    @apply border-border;
  }

  .markdown-body img {
    @apply rounded-lg border border-border;
  }

  .markdown-body table {
    @apply w-full overflow-hidden rounded-lg border border-border text-left text-sm;
  }

  .markdown-body thead {
    @apply bg-background;
  }

  .markdown-body th,
  .markdown-body td {
    @apply border-b border-border px-4 py-3;
  }

  .markdown-body pre {
    @apply overflow-x-auto rounded-lg border border-border bg-background p-4 text-sm;
  }

  .markdown-body pre code {
    @apply bg-transparent p-0 text-foreground;
  }

  .code-shell {
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--background) / 0.92);
  }

  .code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid hsl(var(--border) / 0.8);
    padding: 0.75rem 1rem;
    background: hsl(var(--panel) / 0.88);
  }

  .code-badge {
    border-radius: 8px;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--background) / 0.75);
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
  }

  .code-copy-button {
    border-radius: 8px;
    border: 1px solid hsl(var(--border) / 0.8);
    background: hsl(var(--background) / 0.78);
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .code-copy-button:hover {
    border-color: hsl(var(--accent) / 0.28);
    background: hsl(var(--panel) / 0.95);
  }

  .typing-cursor {
    display: inline-block;
    width: 0.65rem;
    height: 1rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background: hsl(var(--accent));
    animation: blink 1s step-end infinite;
    vertical-align: middle;
  }

  .auth-panel {
    background:
      linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--panel)) 100%);
  }

  .auth-sweep {
    pointer-events: none;
    position: absolute;
    inset: -40% -20% auto;
    height: 8rem;
    background: linear-gradient(
      90deg,
      transparent,
      hsl(var(--accent) / 0.16),
      transparent
    );
    transform: rotate(-8deg) translateX(-40%);
    animation: auth-sweep 5s ease-in-out infinite;
  }

  @keyframes auth-sweep {
    0%,
    100% {
      transform: rotate(-8deg) translateX(-45%);
      opacity: 0.2;
    }

    50% {
      transform: rotate(-8deg) translateX(45%);
      opacity: 0.55;
    }
  }
}