import { manofa } from "@indietabletop/appkit/common.css.ts";
import { style } from "@vanilla-extract/css";

export const page = style({
  minBlockSize: "100svh",
  paddingBlockStart: "30svh",
  paddingInline: "clamp(1rem, 5vw, 3rem)",
  textAlign: "center",
});

export const heading = style([
  manofa,
  {
    fontSize: "1.5rem",
    lineHeight: 1.2,
  },
]);

export const description = style({
  marginBlockStart: "0.5rem",
  fontSize: "1rem",
});

export const loadingPage = style([
  page,
  { display: "flex", justifyContent: "center" },
]);

export const loadingView = style({
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  paddingInline: "clamp(1rem, 5vw, 3rem)",
  textAlign: "center",
  minBlockSize: "30svh",
});