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

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

@layer base {
  :root {
    --background: #131313;
    --foreground: #FFFFFF;
    --primary: #F58618;
    --border: #222222;
    --muted: #888888;
  }

  * {
    @apply border-border;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body {
    @apply bg-background text-foreground antialiased font-normal;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
  }

  /* Strict "NO BOLD" enforcement from AI_RULES.md */
  *, *::before, *::after {
    font-weight: 400 !important;
  }

  /* No uppercase/italics as per AI_RULES.md */
  *, *::before, *::after {
    text-transform: none !important;
    font-style: normal !important;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tighter;
  }

  input, textarea, select {
    @apply bg-black border border-[#222222] text-white px-3 py-2 focus:border-primary focus:outline-none transition-colors;
    border-radius: 0 !important;
  }
}

@layer components {
  /* Button Styles */
  .btn-primary {
    @apply bg-primary text-black px-4 py-2 hover:bg-[#d47214] transition-colors inline-flex items-center justify-center gap-2;
  }

  .btn-secondary {
    @apply bg-transparent border border-[#888888] text-[#888888] px-4 py-2 hover:border-white hover:text-white transition-colors inline-flex items-center justify-center gap-2;
  }

  /* Level 1 (Cards/Panels): #121212 with a 1px solid border of #222222 */
  .level-1 {
    @apply bg-[#121212] border border-[#222222];
  }

  /* Level 2 (Modals/Popovers): #1A1A1A with a 2px solid border of the Primary Orange */
  .level-2 {
    @apply bg-[#1A1A1A] border-2 border-primary;
  }
  
  /* Active State */
  .active-border {
    @apply border border-primary;
  }

  /* High-contrast status blocks */
  .status-success {
    @apply bg-[#00FF41] text-black px-2 py-0.5;
  }

  .status-alert {
    @apply bg-[#F58618] text-black px-2 py-0.5;
  }
}

/* Custom Industrial Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
  background: #222222;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: #F58618;
}

@layer utilities {
  .text-fluid-lg {
    font-size: clamp(1.125rem, 3cqi, 1.5rem);
  }
  
  .text-fluid-xl {
    font-size: clamp(1.5rem, 5cqi, 2.25rem);
  }

  .card-title {
    @apply text-base font-normal tracking-tight;
  }
  
  .card-subtitle {
     @apply text-xs font-normal text-muted-foreground tracking-tight mt-0.5;
  }

  .mono-data {
    @apply font-normal tracking-normal;
    font-variant-numeric: tabular-nums;
  }
}

/* Safe Area Insets for Modern Mobile Devices */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

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

/* Accessibility: Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-scan-fast,
  .animate-spin-slow,
  .animate-pulse {
    animation: none !important;
  }
}