/* Voidway "Liminal Void" overlay for bedolaga cabinet.
   Injected after upstream bundle via <link> in /opt/cabinet-dist/index.html.
   Overrides Tailwind utility classes for fonts; adds atmospheric background. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800&family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* Tailwind utility overrides — !important required because upstream classes are
   defined later in the cascade via @tailwind utilities. */
.font-sans,
[class*="font-sans"] {
  font-family: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

.font-mono,
[class*="font-mono"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace !important;
}

/* Headings — Unbounded display face with tight tracking. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Unbounded', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.02em;
}

/* Body backdrop — violet radial wash on top of upstream bg-dark-950 (now #050507 via Track A). */
body {
  background-image: radial-gradient(circle at 50% -10%, rgba(168, 85, 247, 0.18), transparent 55%),
                    radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.05), transparent 50%) !important;
  background-attachment: fixed !important;
}

/* SVG fractal noise grain — same source as voidway-sub. Sits above app content
   with overlay blend; opacity tuned low so it doesn't interfere with text legibility. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Faint 64px hairline grid behind content, fading at viewport edges. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(to right, rgba(245, 245, 240, 0.022) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(245, 245, 240, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 35%, black 40%, transparent 75%);
          mask-image: radial-gradient(circle at 50% 35%, black 40%, transparent 75%);
}

/* Selection — violet wash. */
::selection {
  background: rgba(168, 85, 247, 0.4);
  color: #ffffff;
}

/* Scrollbar — match dust→violet on hover. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(91, 91, 101, 0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, 0.4); }