import { readFileSync } from "node:fs";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import { describe, expect, it } from "vitest";

const css = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "../src/index.css"), "utf8");

describe("theme (CR-005)", () => {
  it("self-hosts the display and body fonts", () => {
    expect(css).toMatch(/@import "@fontsource\/chakra-petch\//);
    expect(css).toMatch(/@import "@fontsource\/barlow\//);
    expect(css).toMatch(/--font-display: "Chakra Petch"/);
    expect(css).toMatch(/--font-sans: "Barlow"/);
  });

  it("puts every screen on the space backdrop", () => {
    expect(css).toContain('url("/assets/map-gen/bg.webp")');
  });

  it("turns motion off under prefers-reduced-motion", () => {
    expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)/);
  });
});