@import "@fontsource-variable/inter";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/600.css";

/*
 * starlight theme mapped onto the appview's palette (tailwind grays,
 * slate-100/gray-900 body, monochrome accents). fonts prefer the
 * appview's self-hosted files (/static/fonts, present in the nix
 * build) and fall back to the fontsource copies in dev.
 */
:root {
  --sl-font: "InterVariable", "Inter Variable", system-ui, sans-serif;
  --sl-font-mono: "IBMPlexMono", "IBM Plex Mono", monospace;

  /* the appview topbar sits directly on the body background */
  --sl-color-bg-nav: var(--sl-color-black);
  --sl-color-bg-sidebar: var(--sl-color-black);

  /* dark — appview dark mode: bg-gray-900, white text */
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #f3f4f6; /* gray-100 */
  --sl-color-gray-2: #d1d5db; /* gray-300 */
  --sl-color-gray-3: #9ca3af; /* gray-400 */
  --sl-color-gray-4: #4b5563; /* gray-600 */
  --sl-color-gray-5: #374151; /* gray-700 */
  --sl-color-gray-6: #1f2937; /* gray-800 */
  --sl-color-black: #111827; /* gray-900 */

  --sl-color-accent-low: #374151; /* gray-700 */
  --sl-color-accent: #6b7280; /* gray-500 */
  --sl-color-accent-high: #d1d5db; /* gray-300 */
}

:root[data-theme="light"] {
  /* light — white surfaces, black text */
  --sl-color-white: #000000;
  --sl-color-gray-1: #1f2937; /* gray-800 */
  --sl-color-gray-2: #374151; /* gray-700 */
  --sl-color-gray-3: #6b7280; /* gray-500 */
  --sl-color-gray-4: #9ca3af; /* gray-400 */
  --sl-color-gray-5: #d1d5db; /* gray-300 */
  --sl-color-gray-6: #f3f4f6; /* gray-100 */
  --sl-color-gray-7: #f9fafb; /* gray-50 */
  --sl-color-black: #ffffff;

  --sl-color-accent-low: #e5e7eb; /* gray-200 */
  --sl-color-accent: #4b5563; /* gray-600 */
  --sl-color-accent-high: #111827; /* gray-900 */
}

/* landing page */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.landing-section {
  max-width: 46rem;
  margin-top: 2rem;
}

/* hero tweaks for the landing page */
[data-has-hero] .hero {
  padding-block: 3rem;
}

/* ascii dolly in the hero (see scripts/gen-ascii-dolly.mjs) */
.ascii-dolly {
  font-family: var(--sl-font-mono);
  font-size: 0.55rem;
  line-height: 1.2;
  color: var(--sl-color-white);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  user-select: none;
}

[data-has-hero] .hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}