@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&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #0e395e; /* blue-900 */
  --color-primary-50: #f0f7ff; /* blue-50 */
  --color-primary-100: #e0f0ff; /* blue-100 */
  --color-primary-200: #bae0ff; /* blue-200 */
  --color-primary-300: #7cc7ff; /* blue-300 */
  --color-primary-400: #36a9ff; /* blue-400 */
  --color-primary-500: #0ea5e9; /* blue-500 */
  --color-primary-600: #0284c7; /* blue-600 */
  --color-primary-700: #0369a1; /* blue-700 */
  --color-primary-800: #075985; /* blue-800 */
  --color-primary-900: #0e395e; /* blue-900 */

  /* Secondary Colors */
  --color-secondary: #365169; /* slate-600 */
  --color-secondary-50: #f8fafc; /* slate-50 */
  --color-secondary-100: #f1f5f9; /* slate-100 */
  --color-secondary-200: #e2e8f0; /* slate-200 */
  --color-secondary-300: #cbd5e1; /* slate-300 */
  --color-secondary-400: #94a3b8; /* slate-400 */
  --color-secondary-500: #64748b; /* slate-500 */
  --color-secondary-600: #365169; /* slate-600 */
  --color-secondary-700: #334155; /* slate-700 */
  --color-secondary-800: #1e293b; /* slate-800 */
  --color-secondary-900: #0f172a; /* slate-900 */

  /* Accent Colors */
  --color-accent: #74abdb; /* sky-400 */
  --color-accent-50: #f0f9ff; /* sky-50 */
  --color-accent-100: #e0f2fe; /* sky-100 */
  --color-accent-200: #bae6fd; /* sky-200 */
  --color-accent-300: #7dd3fc; /* sky-300 */
  --color-accent-400: #74abdb; /* sky-400 */
  --color-accent-500: #0ea5e9; /* sky-500 */
  --color-accent-600: #0284c7; /* sky-600 */
  --color-accent-700: #0369a1; /* sky-700 */
  --color-accent-800: #075985; /* sky-800 */
  --color-accent-900: #0c4a6e; /* sky-900 */

  /* Background Colors */
  --color-background: #f8fafc; /* slate-50 */
  --color-surface: #ffffff; /* white */

  /* Text Colors */
  --color-text-primary: #1a202c; /* gray-800 */
  --color-text-secondary: #4a5568; /* gray-600 */

  /* Status Colors */
  --color-success: #48bb78; /* green-400 */
  --color-success-50: #f0fff4; /* green-50 */
  --color-success-100: #c6f6d5; /* green-100 */
  --color-success-200: #9ae6b4; /* green-200 */
  --color-success-300: #68d391; /* green-300 */
  --color-success-400: #48bb78; /* green-400 */
  --color-success-500: #38a169; /* green-500 */
  --color-success-600: #2f855a; /* green-600 */
  --color-success-700: #276749; /* green-700 */
  --color-success-800: #22543d; /* green-800 */
  --color-success-900: #1a202c; /* green-900 */

  --color-warning: #ed8936; /* orange-400 */
  --color-warning-50: #fffaf0; /* orange-50 */
  --color-warning-100: #feebc8; /* orange-100 */
  --color-warning-200: #fbd38d; /* orange-200 */
  --color-warning-300: #f6ad55; /* orange-300 */
  --color-warning-400: #ed8936; /* orange-400 */
  --color-warning-500: #dd6b20; /* orange-500 */
  --color-warning-600: #c05621; /* orange-600 */
  --color-warning-700: #9c4221; /* orange-700 */
  --color-warning-800: #7b341e; /* orange-800 */
  --color-warning-900: #652b19; /* orange-900 */

  --color-error: #f56565; /* red-400 */
  --color-error-50: #fff5f5; /* red-50 */
  --color-error-100: #fed7d7; /* red-100 */
  --color-error-200: #feb2b2; /* red-200 */
  --color-error-300: #fc8181; /* red-300 */
  --color-error-400: #f56565; /* red-400 */
  --color-error-500: #e53e3e; /* red-500 */
  --color-error-600: #c53030; /* red-600 */
  --color-error-700: #9b2c2c; /* red-700 */
  --color-error-800: #822727; /* red-800 */
  --color-error-900: #63171b; /* red-900 */

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

  /* Shadow Colors */
  --shadow-primary: rgba(14, 57, 94, 0.15); /* primary with opacity */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
}

/* 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-accent text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 ease-in-out hover:bg-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2;
  }

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

  .card {
    @apply bg-surface rounded-lg shadow-sm border border-border p-6 transition-all duration-300 ease-in-out;
  }

  .card-hover {
    @apply hover:shadow-lg hover:shadow-primary;
  }

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

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

  .shadow-gaming {
    box-shadow: 0 4px 12px var(--shadow-primary);
  }

  .shadow-gaming-lg {
    box-shadow: 0 8px 24px var(--shadow-primary);
  }
}

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

  .text-balance {
    text-wrap: balance;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}