@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: #F59E0B;
  --color-primary-dark: #D97706;
  --color-secondary: #0F766E;
  --color-secondary-light: #14B8A6;
  --color-background: #0F172A;
  --color-surface: #1E293B;
  --color-surface-light: #334155;
  --color-border: #334155;
  --color-text-primary: #F1F5F9;
  --color-text-secondary: #CBD5E1;
  --color-text-muted: #94A3B8;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

* {
  @apply border-slate-700;
}

html {
  @apply scroll-smooth;
  scroll-behavior: smooth;
}

body {
  @apply bg-slate-900 text-slate-100 font-sans antialiased;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  overflow-x: hidden;
}

html {
  scrollbar-color: var(--color-surface-light) var(--color-background);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-light);
  border-radius: 4px;
  border: 2px solid var(--color-background);

  &:hover {
    background: var(--color-slate-600);
  }
}

::-webkit-scrollbar-corner {
  background: var(--color-background);
}

a {
  @apply transition-colors duration-200;
  color: var(--color-primary);

  &:hover {
    color: var(--color-primary-dark);
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}

input:-webkit-autofill {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

@layer base {
  h1 {
    @apply text-4xl font-bold tracking-tight;
  }

  h2 {
    @apply text-3xl font-bold tracking-tight;
  }

  h3 {
    @apply text-2xl font-bold;
  }

  h4 {
    @apply text-xl font-semibold;
  }

  h5 {
    @apply text-lg font-semibold;
  }

  h6 {
    @apply text-base font-semibold;
  }

  p {
    @apply text-base leading-relaxed;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
  }

  .btn-primary {
    @apply btn bg-mango-500 text-slate-900 hover:bg-mango-600 active:bg-mango-700 focus-visible:ring-mango-500;
  }

  .btn-secondary {
    @apply btn bg-teal-700 text-white hover:bg-teal-600 active:bg-teal-800 focus-visible:ring-teal-500;
  }

  .btn-ghost {
    @apply btn bg-transparent text-slate-100 hover:bg-slate-800 active:bg-slate-700 focus-visible:ring-mango-500;
  }

  .btn-outline {
    @apply btn border-2 border-slate-700 bg-transparent text-slate-100 hover:bg-slate-800 active:bg-slate-700 focus-visible:ring-mango-500;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  .input-field {
    @apply w-full px-4 py-2.5 bg-slate-800 border border-slate-700 rounded-lg text-slate-100 placeholder-slate-400 transition-colors duration-200 focus:outline-none focus:border-mango-500 focus:ring-2 focus:ring-mango-500/20;
  }

  .card {
    @apply bg-slate-800 border border-slate-700 rounded-xl p-6 transition-all duration-200 hover:border-slate-600 shadow-card-dark;
  }

  .card-hover {
    @apply card hover:shadow-lg hover:border-mango-500/30;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply badge bg-mango-500/10 text-mango-400 border border-mango-500/20;
  }

  .badge-secondary {
    @apply badge bg-teal-500/10 text-teal-400 border border-teal-500/20;
  }

  .badge-success {
    @apply badge bg-green-500/10 text-green-400 border border-green-500/20;
  }

  .badge-warning {
    @apply badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
  }

  .badge-error {
    @apply badge bg-red-500/10 text-red-400 border border-red-500/20;
  }

  .gradient-mango {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  }

  .gradient-teal {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  }

  .gradient-dark {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  }

  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10;
  }

  .glass-dark {
    @apply bg-slate-900/40 backdrop-blur-md border border-slate-700/50;
  }

  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .underline-accent {
    position: relative;
    display: inline-block;

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
      border-radius: 2px;
    }
  }

  .shimmer-loading {
    background: linear-gradient(
      90deg,
      var(--color-surface) 0%,
      var(--color-surface-light) 50%,
      var(--color-surface) 100%
    );
    background-size: 1200px 100%;
    animation: shimmer 2s infinite;
  }

  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mango-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900;
  }

  .prose-dark {
    @apply text-slate-300;

    strong {
      @apply text-slate-100 font-semibold;
    }

    a {
      @apply text-mango-400 hover:text-mango-300;
    }
  }
}

@layer utilities {
  .safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-area-inset-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-inset-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-area-inset-right {
    padding-right: env(safe-area-inset-right);
  }

  .container-custom {
    @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .flex-center {
    @apply flex items-center justify-center;
  }

  .flex-between {
    @apply flex items-center justify-between;
  }

  .truncate-lines-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .truncate-lines-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .smooth-transition {
    transition-property: color, background-color, border-color, text-decoration-color,
      fill, stroke, opacity, box-shadow, transform;
    transition-duration: var(--transition-base);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}