@import "tailwindcss";

@font-face {
  font-family: "MonaspiceNe Nerd Font Mono";
  src: url("/fonts/MonaspiceNeNerdFontMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "MonaspiceNe Nerd Font Mono";
  src: url("/fonts/MonaspiceNeNerdFontMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "MonaspiceNe Nerd Font Mono";
  src: url("/fonts/MonaspiceNeNerdFontMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@custom-variant coarse (@media (pointer: coarse));

@theme {
  --color-bg-primary: #0f1117;
  --color-bg-card: #171b24;
  --color-bg-inset: #0a0c12;
  --color-text-primary: #e8eaf0;
  --color-text-secondary: #7a8394;
  --color-border: #454d66;
  --color-accent: #5b8af0;
  --color-accent-bright: #82a8f7;
  --color-accent-green: #22c55e;
  --font-mono: "MonaspiceNe Nerd Font Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-primary: #0f1117;
  --color-bg-card: #171b24;
  --color-bg-inset: #0a0c12;
  --color-text-primary: #e8eaf0;
  --color-text-secondary: #7a8394;
  --color-border: #454d66;
  --color-accent: #5b8af0;
  --color-accent-bright: #82a8f7;
  --color-accent-green: #22c55e;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg-primary: #f8f9fb;
  --color-bg-card: #ffffff;
  --color-bg-inset: #e8eaef;
  --color-text-primary: #1a1d24;
  --color-text-secondary: #6b7280;
  --color-border: #d1d5db;
  --color-accent: #4a7ae8;
  /* "bright" means more salient than accent, relative to the theme background:
     lighter on dark, darker + more saturated on light (lighter would wash out). */
  --color-accent-bright: #3b66d6;
  --color-accent-green: #16a34a;
}

body {
  font-family: var(--font-mono);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Clickable elements should feel clickable */
button,
[role="button"],
[role="option"],
[role="menuitem"],
a,
summary {
  cursor: pointer;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

@keyframes logo-chase {
  0%, 100% { opacity: 0.2; }
  16.6%, 33.3% { opacity: 1; }
}

/* Prevent iOS Safari page scroll/bounce — fullbleed always on in single-view. */
html.fullbleed,
html.fullbleed body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Pin app shell to visual viewport when keyboard opens on iOS.
   --app-height and --app-offset-top are set by useVisualViewport. */
html.fullbleed .app-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--app-height, 100vh);
  top: var(--app-offset-top, 0px);
  overflow: hidden;
  will-change: top, height;
}

/* Prevent xterm scroll from chaining to the page on iOS */
.xterm .xterm-viewport {
  overscroll-behavior: none;
}
