@import 'tailwindcss';

/* =============================================================================
   DESIGN SYSTEM: "Tech Indigo" - Linear-inspired minimal theme
   
   PRIMARY ACCENT: Indigo-600 (#4f46e5) - ONLY for interactive elements
   BACKGROUNDS: Pure white (#ffffff) or Slate-50 (#f8fafc) - NO blue tints
   TEXT: Slate-900 (headers), Slate-600 (body) - Monochrome only
   ============================================================================= */

@theme {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Border Radius - Tight, modern corners */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* ==========================================================================
     COLOR PALETTE - Strict monochrome + single accent
     ========================================================================== */

  /* Backgrounds - Pure white/gray only */
  --color-background: #ffffff;
  --color-card: #ffffff;
  --color-secondary: #f8fafc; /* Slate-50 for subtle sections */
  --color-muted: #f1f5f9; /* Slate-100 for hover states */

  /* Text - Slate scale only */
  --color-foreground: #0f172a; /* Slate-900 - Headers */
  --color-card-foreground: #0f172a;
  --color-secondary-foreground: #475569; /* Slate-600 - Body text */
  --color-muted-foreground: #64748b; /* Slate-500 - Muted/placeholder */

  /* PRIMARY ACCENT - Indigo-600 (Interactive elements ONLY) */
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca; /* Indigo-700 for hover */
  --color-primary-foreground: #ffffff;

  /* Accent - Same as primary */
  --color-accent: #4f46e5;
  --color-accent-foreground: #ffffff;

  /* Borders - Subtle gray */
  --color-border: #e2e8f0; /* Slate-200 */
  --color-input: #e2e8f0;

  /* Focus ring - Indigo */
  --color-ring: #4f46e5;

  /* Semantic colors */
  --color-destructive: #dc2626; /* Red-600 */
  --color-destructive-foreground: #ffffff;
  --color-success: #16a34a; /* Green-600 */
  --color-success-foreground: #ffffff;
  --color-warning: #d97706; /* Amber-600 */
  --color-warning-foreground: #ffffff;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

html,
body {
  background-color: var(--color-background);
  color: var(--color-secondary-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-y: scroll;
  overscroll-behavior: none;
}

/* Headers use darker text */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-foreground);
}

/* =============================================================================
   FOCUS STATES - Indigo ring
   ============================================================================= */

*:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* =============================================================================
   MIGRATION OVERRIDES - Map old dark theme classes to new light theme
   ============================================================================= */

@layer utilities {
  /* Background overrides */
  .bg-slate-900 {
    background-color: var(--color-background) !important;
  }
  .bg-slate-900\/50 {
    background-color: var(--color-background) !important;
  }
  .bg-slate-800 {
    background-color: var(--color-card) !important;
  }
  .bg-slate-800\/50 {
    background-color: var(--color-secondary) !important;
  }
  .bg-slate-700 {
    background-color: var(--color-muted) !important;
  }

  /* Border overrides */
  .border-slate-700 {
    border-color: var(--color-border) !important;
  }
  .border-slate-800 {
    border-color: var(--color-border) !important;
  }

  /* Text overrides - Slate shades (keep monochrome) */
  .text-slate-400 {
    color: var(--color-muted-foreground) !important;
  }
  .text-slate-500 {
    color: var(--color-muted-foreground) !important;
  }

  /* Cyan → Indigo (for links, active states) */
  .text-cyan-400 {
    color: var(--color-primary) !important;
  }
  .text-cyan-500 {
    color: var(--color-primary) !important;
  }
  .text-cyan-600 {
    color: var(--color-primary) !important;
  }

  /* Semantic colors */
  .text-emerald-400 {
    color: var(--color-success) !important;
  }
  .text-emerald-500 {
    color: var(--color-success) !important;
  }
  .text-red-400 {
    color: var(--color-destructive) !important;
  }
  .text-amber-400 {
    color: var(--color-warning) !important;
  }

  /* Gradient buttons → solid Indigo */
  .from-cyan-600,
  .from-cyan-500,
  .from-emerald-600,
  .from-indigo-600 {
    background-color: var(--color-primary) !important;
    background-image: none !important;
  }

  /* Hover states for gradients */
  .hover\:from-cyan-500:hover,
  .hover\:from-emerald-500:hover {
    background-color: var(--color-primary-hover) !important;
  }
}

/* =============================================================================
   COMPONENT STYLES
   ============================================================================= */

/* Card */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Primary Button - Solid Indigo */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary Button - White with border */
.btn-secondary {
  background-color: var(--color-card);
  color: var(--color-secondary-foreground);
  border: 1px solid var(--color-border);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-secondary-foreground);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-ghost:hover {
  background-color: var(--color-muted);
}

/* Link style - Indigo accent */
a.link,
.text-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a.link:hover,
.text-link:hover {
  color: var(--color-primary-hover);
}

/* Badge - Primary variant */
.badge-primary {
  background-color: #eef2ff; /* Indigo-50 */
  color: var(--color-primary);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Active/Selected states */
.active-tab,
[data-state='active'] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Input focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}