@import "tailwindcss";

@layer base {
  :root {
    --bg-main: #0F1117;
    --bg-panel: #161B22;
    --bg-header: #1C2128;
    --bg-sidebar: #0D1117;
    --border-color: #1E293B;
    --blue-accent: #3B82F6;
  }

  body {
    font-family: 'Inter', system-ui, sans-serif;
    color: #E2E8F0;
    background-color: #0F1117;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  body.dark {
    background-color: #0F1117;
    color: #E2E8F0;
  }

  body.dark header {
    background-color: rgba(22, 27, 34, 0.95) !important;
    border-color: #1E293B !important;
  }

  body.dark .bg-white {
    background-color: #161B22 !important;
    color: #E2E8F0 !important;
  }

  body.dark .bg-brandblue-50 {
    background-color: #1C2128 !important;
  }

  body.dark .border-gray-100, body.dark .border-gray-200, body.dark .border-slate-700, body.dark .border-slate-800 {
    border-color: #1E293B !important;
  }

  body.dark .text-slateink {
    color: #E2E8F0 !important;
  }

  body.dark .text-slateink-light {
    color: #94A3B8 !important;
  }

  h1, h2, h3, h4, .font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -0.02em;
  }
}

.btn-gradient {
  background: #2563EB;
  color: #FFFFFF;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-gradient:hover {
  background: #3B82F6;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-outline {
  border: 1px solid #1E293B;
  background: #161B22;
  color: #E2E8F0;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-outline:hover {
  border-color: #3B82F6;
  color: #3B82F6;
  background: #1C2128;
}

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  border-color: #3B82F6 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.glass {
  background: rgba(22, 27, 34, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid #1E293B;
}

body.dark .glass {
  background: rgba(22, 27, 34, 0.85) !important;
  border-color: #1E293B !important;
}

.section-eyebrow {
  letter-spacing: 0.15em;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.nav-sticky {
  transition: all 0.3s ease;
}

::selection {
  background: #2563EB;
  color: #FFFFFF;
}