@import "tailwindcss";
@import "@fontsource-variable/literata";
@import "@fontsource-variable/outfit";
@import "@fontsource/space-mono/400.css";
@import "@fontsource/space-mono/700.css";

:root {
  --font-serif: "Literata Variable", Georgia, serif;
  --font-sans: "Outfit Variable", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --bg: #0a0a0a;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-elevated: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.10);
  --text: rgba(255, 255, 255, 0.90);
  --text-muted: rgba(255, 255, 255, 0.55);
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --accent: #f59e0b;

  /* App-style tokens (mirror the desktop DB viewer) */
  --canvas: #0a0a0a;
  --surface-raised: rgba(255, 255, 255, 0.07);
  --text-subtle: rgba(255, 255, 255, 0.35);
  --accent-hover: #fbbf24;

  /* Popover/dropdown surfaces (solid, readable — mirror the desktop app) */
  --popover-bg: #18181b;
  --popover-border: rgba(255, 255, 255, 0.12);
}

html.light {
  --bg: #fafafa;
  --surface: rgba(0, 0, 0, 0.03);
  --surface-elevated: rgba(0, 0, 0, 0.06);
  --border: rgba(0, 0, 0, 0.10);
  --text: #171717;
  --text-muted: #737373;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --accent: #d97706;

  /* App-style tokens (mirror the desktop DB viewer) */
  --canvas: #fafafa;
  --surface-raised: rgba(0, 0, 0, 0.06);
  --text-subtle: rgba(0, 0, 0, 0.35);
  --accent-hover: #b45309;

  /* Popover/dropdown surfaces (solid, readable — mirror the desktop app) */
  --popover-bg: #ffffff;
  --popover-border: rgba(0, 0, 0, 0.10);
}

/*
 * Entry-animated elements start hidden (opacity 0) to prevent a flash of
 * content before landing.js loads anime.js and runs the entrance timeline.
 * The html.anime-ready class is present from first paint; animated elements
 * are revealed by the anime.js timeline / IntersectionObserver (immediately
 * for prefers-reduced-motion users). A <noscript> override in Layout.astro
 * plus a JS script-load fallback guarantee content is never left hidden.
 */
html.anime-ready .hero-animate > *,
html.anime-ready .hero-screenshot,
html.anime-ready .section-animate > * {
  opacity: 0;
}

html {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: rgba(59, 130, 246, 0.3);
}
