@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #004f91; /* blue-900 */
  --color-primary-50: #eff6ff; /* blue-50 */
  --color-primary-100: #dbeafe; /* blue-100 */
  --color-primary-200: #bfdbfe; /* blue-200 */
  --color-primary-300: #93c5fd; /* blue-300 */
  --color-primary-400: #60a5fa; /* blue-400 */
  --color-primary-500: #3b82f6; /* blue-500 */
  --color-primary-600: #2563eb; /* blue-600 */
  --color-primary-700: #1d4ed8; /* blue-700 */
  --color-primary-800: #1e40af; /* blue-800 */
  --color-primary-900: #004f91; /* custom primary */

  /* Secondary Colors */
  --color-secondary: #0096d6; /* sky-500 */
  --color-secondary-50: #f0f9ff; /* sky-50 */
  --color-secondary-100: #e0f2fe; /* sky-100 */
  --color-secondary-200: #bae6fd; /* sky-200 */
  --color-secondary-300: #7dd3fc; /* sky-300 */
  --color-secondary-400: #38bdf8; /* sky-400 */
  --color-secondary-500: #0096d6; /* custom secondary */
  --color-secondary-600: #0284c7; /* sky-600 */
  --color-secondary-700: #0369a1; /* sky-700 */
  --color-secondary-800: #075985; /* sky-800 */
  --color-secondary-900: #0c4a6e; /* sky-900 */

  /* Accent Colors */
  --color-accent: #e73030; /* red-600 */
  --color-accent-50: #fef2f2; /* red-50 */
  --color-accent-100: #fee2e2; /* red-100 */
  --color-accent-200: #fecaca; /* red-200 */
  --color-accent-300: #fca5a5; /* red-300 */
  --color-accent-400: #f87171; /* red-400 */
  --color-accent-500: #ef4444; /* red-500 */
  --color-accent-600: #e73030; /* custom accent */
  --color-accent-700: #b91c1c; /* red-700 */
  --color-accent-800: #991b1b; /* red-800 */
  --color-accent-900: #7f1d1d; /* red-900 */

  /* Background Colors */
  --color-background: #fafbfc; /* slate-50 */
  --color-surface: #f1f5f9; /* slate-100 */

  /* Text Colors */
  --color-text-primary: #1e293b; /* slate-800 */
  --color-text-secondary: #64748b; /* slate-500 */

  /* Status Colors */
  --color-success: #059669; /* emerald-600 */
  --color-success-50: #ecfdf5; /* emerald-50 */
  --color-success-100: #d1fae5; /* emerald-100 */
  --color-success-500: #10b981; /* emerald-500 */
  --color-success-600: #059669; /* emerald-600 */

  --color-warning: #d97706; /* amber-600 */
  --color-warning-50: #fffbeb; /* amber-50 */
  --color-warning-100: #fef3c7; /* amber-100 */
  --color-warning-500: #f59e0b; /* amber-500 */
  --color-warning-600: #d97706; /* amber-600 */

  --color-error: #dc2626; /* red-600 */
  --color-error-50: #fef2f2; /* red-50 */
  --color-error-100: #fee2e2; /* red-100 */
  --color-error-500: #ef4444; /* red-500 */
  --color-error-600: #dc2626; /* red-600 */

  /* Border Colors */
  --color-border: #e2e8f0; /* slate-200 */
  --color-border-light: #f1f5f9; /* slate-100 */

  /* Shadow Colors */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Base Styles */
@layer base {
  html {
    font-family: "Inter", sans-serif;
  }

  body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    line-height: 1.2;
  }

  .font-mono {
    font-family: "JetBrains Mono", monospace;
  }
}

/* Component Styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 ease-out hover:bg-primary-800 focus:ring-4 focus:ring-primary-200 focus:outline-none;
  }

  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 ease-out hover:bg-secondary-600 focus:ring-4 focus:ring-secondary-200 focus:outline-none;
  }

  .btn-accent {
    @apply bg-accent text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 ease-out hover:bg-accent-700 focus:ring-4 focus:ring-accent-200 focus:outline-none;
  }

  .card {
    @apply bg-white rounded-lg shadow-md border border-border p-6 transition-all duration-300 ease-out hover:shadow-lg;
  }

  .input-field {
    @apply w-full px-4 py-3 border border-border rounded-lg focus:ring-4 focus:ring-primary-200 focus:border-primary transition-all duration-300 ease-out outline-none;
  }

  .text-gradient {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
}

/* Utility Classes */
@layer utilities {
  .transition-smooth {
    transition: all 300ms ease-out;
  }

  .shadow-performance {
    box-shadow: var(--shadow-lg);
  }

  .shadow-hero {
    box-shadow: var(--shadow-xl);
  }
}