/* USO — IMD / terminal OS skin over Powcats shell */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  color-scheme: light !important;
  --uso-bg: #f7f7f2;
  --uso-ink: #0a0a0a;
  --uso-mute: #6a6a64;
  --uso-line: #0a0a0a;
  --uso-panel: #f7f7f2;
  --uso-invert: #0a0a0a;
}

html,
body,
#root {
  background: var(--uso-bg) !important;
  color: var(--uso-ink) !important;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace !important;
}

/* flatten dark blue palette → cream / black / gray */
body,
#root,
[class*="bg-ink"],
[class*="bg-panel"],
.bg-ink,
.bg-panel,
.bg-panel-2,
.bg-panel-3 {
  --tw-bg-opacity: 1;
}

/* global surface remap via forced property overrides on common utility classes */
.bg-ink {
  background-color: var(--uso-bg) !important;
}
.bg-panel,
.bg-panel-2,
.bg-panel-3 {
  background-color: var(--uso-panel) !important;
}
.bg-work,
.bg-rare,
.bg-chain,
.bg-alarm {
  background-color: var(--uso-ink) !important;
  color: var(--uso-bg) !important;
}
.text-on-work,
.on-work {
  color: var(--uso-bg) !important;
}
.text-text,
.text-ink {
  color: var(--uso-ink) !important;
}
.text-text-2 {
  color: var(--uso-mute) !important;
}
.text-work,
.text-rare,
.text-chain {
  color: var(--uso-ink) !important;
}

/* borders: sharp 1px black */
[class*="outline"],
[class*="border"],
.outline,
.border {
  border-color: var(--uso-line) !important;
  outline-color: var(--uso-line) !important;
}

/* kill soft radius / glow feel */
*,
*::before,
*::after {
  border-radius: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* type: monospace everywhere */
h1,
h2,
h3,
.h1,
.text-h1,
.text-h2,
.text-h3,
.text-display,
.text-hero,
.text-label,
.label,
button,
input,
a {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: 0.02em;
}

.text-hero,
.text-display,
.text-h1 {
  text-transform: uppercase;
}

/* header / buttons feel like IMD chips */
header,
nav {
  border-color: var(--uso-line) !important;
}

button,
a[role="button"],
.btn {
  border-radius: 0 !important;
}

/* CRT scanline veil — light */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.025) 2px,
    rgba(0, 0, 0, 0.025) 3px
  );
  mix-blend-mode: multiply;
}

/* theme-color surfaces often set via inline / dark vars */
[style*="#061833"],
[style*="rgb(6, 24, 51)"] {
  background-color: var(--uso-bg) !important;
}

/* pixel art crisp */
img[data-pixel],
img[src*="uso-"],
canvas {
  image-rendering: pixelated;
}

/* force IMD chip buttons — no blue cartridge chrome */
.frame-work,
.frame-work-down {
  border: 1px solid #0a0a0a !important;
  border-image: none !important;
}
button.frame-work,
a.frame-work {
  background: #0a0a0a !important;
  color: #f7f7f2 !important;
}