@import "tailwindcss";

:root {
  /* Surfaces */
  --background: #0B0F1A;
  --surface-0: #111827;
  --surface-1: #1F2937;
  --surface-2: #374151;

  /* Text */
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;

  /* Accent — Teal */
  --accent: #14B8A6;
  --accent-hover: #0D9488;
  --accent-muted: rgba(20, 184, 166, 0.15);

  /* Status */
  --success: #22C55E;
  --success-muted: rgba(34, 197, 94, 0.15);
  --warning: #F59E0B;
  --warning-muted: rgba(245, 158, 11, 0.15);
  --danger: #EF4444;
  --danger-muted: rgba(239, 68, 68, 0.15);

  /* Architecture */
  --arch-dedicated: #3B82F6;
  --arch-nextgen: #A855F7;
  --arch-serverless: #F97316;
  --arch-byoc: #EC4899;

  /* PR State */
  --state-merged: #A855F7;
  --state-open: #22C55E;
  --state-closed: #6B7280;

  --foreground: var(--text-primary);
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #F3F4F6;
    --surface-0: #FFFFFF;
    --surface-1: #F9FAFB;
    --surface-2: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --accent: #0D9488;
    --accent-hover: #0F766E;
    --accent-muted: rgba(13, 148, 136, 0.08);
    --success-muted: rgba(34, 197, 94, 0.08);
    --warning-muted: rgba(245, 158, 11, 0.08);
    --danger-muted: rgba(239, 68, 68, 0.08);
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface-0: var(--surface-0);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-muted: var(--accent-muted);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-success: var(--success);
  --color-success-muted: var(--success-muted);
  --color-warning: var(--warning);
  --color-warning-muted: var(--warning-muted);
  --color-danger: var(--danger);
  --color-danger-muted: var(--danger-muted);
  --color-arch-dedicated: var(--arch-dedicated);
  --color-arch-nextgen: var(--arch-nextgen);
  --color-arch-serverless: var(--arch-serverless);
  --color-arch-byoc: var(--arch-byoc);
  --color-state-merged: var(--state-merged);
  --color-state-open: var(--state-open);
  --color-state-closed: var(--state-closed);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background: var(--background);
  background-image: radial-gradient(circle, var(--surface-2) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  color: var(--foreground);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

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

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

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

.progress-shimmer {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}