@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --color-bg: #0b0d10;
  --color-bg-soft: #111418;
  --color-bg-elev: #161a1f;
  --color-line: #232830;
  --color-line-soft: #1a1f25;

  --color-fg: #c7ccd4;
  --color-fg-muted: #8b929d;
  --color-fg-dim: #5b626c;

  --color-accent: #5b9fe0;
  --color-accent-soft: #3d6fa8;
  --color-accent-glow: rgba(91, 159, 224, 0.18);

  --color-amber: #d4a55a;

  --radius: 6px;
}

:root {
  color-scheme: dark;
}

* {
  border-color: var(--color-line);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--color-accent-glow);
  color: var(--color-accent);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-line);
  border-radius: 0;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-line-soft);
}

@layer utilities {
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }

  .text-balance {
    text-wrap: balance;
  }

  .scanlines::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.016) 2px,
      rgba(255, 255, 255, 0.016) 3px
    );
    mix-blend-mode: overlay;
  }

  .grain::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .vignette::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      ellipse at center,
      transparent 40%,
      rgba(0, 0, 0, 0.4) 100%
    );
  }

  .text-glow {
    text-shadow: 0 0 12px var(--color-accent-glow);
  }

  .grid-fade {
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 30%, transparent 75%);
  }

  .terminal-shadow {
    box-shadow:
      0 0 0 1px var(--color-line),
      0 24px 60px -20px rgba(0, 0, 0, 0.7),
      0 0 80px -30px var(--color-accent-glow);
  }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink {
  animation: blink 1.05s steps(1) infinite;
}

@keyframes scan-drift {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to { height: var(--radix-accordion-content-height); opacity: 1; }
}
@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); opacity: 1; }
  to { height: 0; opacity: 0; }
}