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

@layer base {
  :root {
    --brand-primary: #1e3a8a;
    --brand-accent: #38bdf8;
    --brand-ink: #0b1320;
    --brand-sun: #fbbf24;
    --brand-rose: #ef4444;
    --brand-slate: #64748b;
    --brand-cloud: #e2e8f0;
  }
}

@layer components {
  .bg-brand-gradient {
    background: radial-gradient(1200px 600px at 10% -10%, rgba(56,189,248,0.2), transparent),
      radial-gradient(1200px 600px at 90% -20%, rgba(30,58,138,0.22), transparent),
      linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  }

  .card {
    @apply bg-white/90 backdrop-blur rounded-xl shadow-sm ring-1 ring-gray-100 transition-all duration-300;
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(30, 58, 138, 0.12);
  }

  .chip {
    @apply px-2 py-1 rounded-full text-xs font-medium;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md text-white transition;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.18);
  }

  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(30, 58, 138, 0.24);
  }

  .btn-outline {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-md border transition;
    border-color: rgba(30, 58, 138, 0.3);
    color: var(--brand-primary);
    background: #ffffff;
  }

  .btn-outline:hover {
    background: #eff6ff;
    transform: translateY(-1px);
  }

  .nav-link {
    @apply text-sm font-medium transition;
    color: #1f2937;
  }

  .nav-link-active {
    color: var(--brand-primary);
  }

  .chart-wrap {
    height: 280px;
  }

  .chart-wrap canvas {
    height: 100% !important;
    width: 100% !important;
  }

  .sentiment-positive {
    @apply chip;
    background: rgba(34,197,94,0.15);
    color: #15803d;
  }

  .sentiment-neutral {
    @apply chip;
    background: rgba(148,163,184,0.2);
    color: #475569;
  }

  .sentiment-negative {
    @apply chip;
    background: rgba(249,115,22,0.18);
    color: #c2410c;
  }

  .sentiment-critical {
    @apply chip;
    background: rgba(239,68,68,0.18);
    color: #b91c1c;
  }

  .badge-status {
    @apply chip;
    background: rgba(59,130,246,0.12);
    color: #1d4ed8;
  }

  .float-slow {
    animation: floatSlow 6s ease-in-out infinite;
  }

  .float-slower {
    animation: floatSlow 8s ease-in-out infinite;
  }

  .pulse-glow {
    animation: pulseGlow 2.8s ease-in-out infinite;
  }

  .lightning {
    position: relative;
    overflow: hidden;
  }

  .lightning::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -30%;
    width: 30%;
    height: 320%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: rotate(20deg);
    animation: lightningSweep 4s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(56, 189, 248, 0); }
  50% { box-shadow: 0 0 24px rgba(56, 189, 248, 0.35); }
}

@keyframes lightningSweep {
  0% { transform: translateX(-220%) rotate(20deg); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translateX(520%) rotate(20deg); opacity: 0; }
  100% { transform: translateX(520%) rotate(20deg); opacity: 0; }
}