@import "tailwindcss";

/*
 * Custom theme configuration for Tailwind v4
 * Based on shadcn/ui "new-york" style with hacker/terminal aesthetic
 */
@theme {
  /* Font families */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Border radius - new-york style is more subtle */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Dark theme colors - hacker aesthetic */
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);

  --color-card: oklch(0.18 0 0);
  --color-card-foreground: oklch(0.985 0 0);

  --color-popover: oklch(0.18 0 0);
  --color-popover-foreground: oklch(0.985 0 0);

  /* Simpsons yellow primary - warm orange-tinted to separate from status yellows */
  --color-primary: oklch(0.88 0.18 85);
  --color-primary-foreground: oklch(0.145 0 0);

  --color-secondary: oklch(0.25 0 0);
  --color-secondary-foreground: oklch(0.985 0 0);

  --color-muted: oklch(0.25 0 0);
  --color-muted-foreground: oklch(0.65 0 0);

  --color-accent: oklch(0.88 0.18 85);
  --color-accent-foreground: oklch(0.145 0 0);

  --color-destructive: oklch(0.55 0.22 29);
  --color-destructive-foreground: oklch(0.985 0 0);

  --color-border: oklch(0.25 0 0);
  --color-input: oklch(0.25 0 0);
  --color-ring: oklch(0.88 0.18 85);

  /* Chart colors */
  --color-chart-1: oklch(0.88 0.18 85);
  --color-chart-2: oklch(0.6 0.15 185);
  --color-chart-3: oklch(0.45 0.1 210);
  --color-chart-4: oklch(0.75 0.15 85);
  --color-chart-5: oklch(0.7 0.18 45);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Monospace elements use JetBrains Mono */
  code,
  pre,
  kbd,
  samp,
  .font-mono {
    font-family: var(--font-mono);
  }

  /* Markdown prose styling */
  .markdown-prose {
    line-height: 1.6;
  }

  .markdown-prose h1,
  .markdown-prose h2,
  .markdown-prose h3 {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
  }

  .markdown-prose h1 {
    font-size: 1.5rem;
  }

  .markdown-prose h2 {
    font-size: 1.25rem;
  }

  .markdown-prose h3 {
    font-size: 1.125rem;
  }

  .markdown-prose p {
    margin-bottom: 1em;
  }

  .markdown-prose ul,
  .markdown-prose ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
  }

  .markdown-prose li {
    margin-bottom: 0.25em;
  }

  .markdown-prose ul {
    list-style-type: disc;
  }

  .markdown-prose ol {
    list-style-type: decimal;
  }

  .markdown-prose code {
    background-color: var(--color-muted);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    font-size: 0.875em;
  }

  .markdown-prose pre {
    background-color: var(--color-muted);
    padding: 1em;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 1em;
  }

  .markdown-prose pre code {
    background-color: transparent;
    padding: 0;
  }

  .markdown-prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 1em;
    margin-left: 0;
    margin-bottom: 1em;
    color: var(--color-muted-foreground);
  }

  .markdown-prose strong {
    font-weight: 600;
  }

  .markdown-prose a {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .markdown-prose hr {
    border-color: var(--color-border);
    margin: 1.5em 0;
  }
}

/* Edge pulse animation for live observation mode */
@keyframes edgePulse {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Border pulse for active hat nodes during observation.
   Animates only border-color (not opacity), so the node content stays stable. */
@keyframes borderPulse {
  0%, 100% { border-color: rgb(239 68 68); }
  50% { border-color: rgb(239 68 68 / 0.3); }
}

.animate-border-pulse {
  animation: borderPulse 2s ease-in-out infinite;
}

/* Smooth border-color transitions for hat node state changes. */
[data-hat-key] {
  transition: border-color 0.3s ease-in-out;
}
