import { style } from "@vanilla-extract/css";
import { vars } from "../../styles/theme.css.ts";
import { radii } from "../../styles/tokens/radii.ts";
import { space } from "../../styles/tokens/spacing.ts";
import { fontSize, fontWeight } from "../../styles/tokens/typography.ts";
import { cardSurface } from "../Card/styles.css.ts";

// Static informational card over the shared flat surface, kept at a denser
// 16px padding.
export const card = style({
  ...cardSurface,
  display: "flex",
  flexDirection: "column",
  gap: space[3],
  paddingBlock: space[4],
  paddingInline: space[4],
});

export const headerRow = style({
  display: "flex",
  alignItems: "center",
  flexWrap: "wrap",
  gap: space[2],
  minWidth: 0,
});

export const kindIcon = style({
  display: "inline-flex",
  alignItems: "center",
  justifyContent: "center",
  width: "32px",
  height: "32px",
  borderRadius: radii.md,
  flexShrink: 0,
  backgroundColor: vars.color.accentSubtle,
  color: vars.color.accentActive,
});

export const eyebrow = style({
  fontSize: fontSize.xs,
  fontWeight: fontWeight.semibold,
  textTransform: "uppercase",
  letterSpacing: "0.07em",
  color: vars.color.textMuted,
});

export const name = style({
  fontSize: fontSize.base,
  fontWeight: fontWeight.medium,
  color: vars.color.text,
});

export const subtitle = style({
  fontSize: fontSize.sm,
  color: vars.color.textMuted,
});

export const gateList = style({
  listStyle: "none",
  display: "flex",
  flexDirection: "column",
  gap: space[2],
  margin: 0,
  padding: 0,
  paddingBlockStart: space[3],
  borderBlockStart: `1px solid ${vars.color.borderSubtle}`,
});

export const gateRow = style({
  fontSize: fontSize.sm,
  color: vars.color.textSecondary,
});

export const gateLead = style({
  fontWeight: fontWeight.semibold,
  color: vars.color.text,
});