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

@layer base {
  :root {
    color-scheme: dark;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
  }

  /* Narrow dark scrollbar — visible in overflow containers */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
    border-radius: 999px;
  }
}

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

  /* Dot-grid ambient background */
  .bg-grid {
    background-image:
      linear-gradient(rgba(6, 182, 212, 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 182, 212, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Vivid radial glows — high-intensity, bleed through glass */
  .bg-radial-glow {
    background:
      radial-gradient(ellipse 90% 60% at 10% 0%,   rgba(6, 182, 212, 0.45) 0%, transparent 50%),
      radial-gradient(ellipse 60% 70% at 90% 90%,  rgba(139, 92, 246, 0.35) 0%, transparent 50%),
      radial-gradient(ellipse 50% 50% at 50% 40%,  rgba(6, 182, 212, 0.12) 0%, transparent 60%),
      radial-gradient(ellipse 35% 35% at 75% 15%,  rgba(99, 102, 241, 0.20) 0%, transparent 55%);
  }

  /* Glass-morphism panel — transparent enough to let glows bleed through */
  .glass {
    background: rgba(3, 7, 18, 0.62);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }

  /* Lighter glass for secondary surfaces */
  .glass-light {
    background: rgba(4, 10, 24, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* Gradient text — cyan to violet */
  .text-gradient {
    background: linear-gradient(90deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Vivid cyan glow border accent */
  .glow-border-cyan {
    box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.40), 0 0 24px rgba(6, 182, 212, 0.15);
  }

  /* Monospace text style for terminal log entries */
  .text-mono {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.65;
  }

  /* Keyboard-safe visual focus ring */
  .focus-ring {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-400 focus-visible:ring-offset-1 focus-visible:ring-offset-shell-950;
  }
}