// Theme — palette + typography + shared style utils
// Aesthetic: black canvas, Barlow, editorial uppercase.

const C = {
  bg: "#000",
  bgAlt: "#080808",
  bgCard: "#0e0e0e",
  white: "#fff",
  gray1: "#ddd",
  gray2: "#999",
  gray3: "#555",
  gray4: "#222",
  line: "#1e1e1e",
};

const F = "'Barlow', sans-serif";

const t = (size, weight = 400, tracking = "normal", transform = "none") => ({
  fontFamily: F,
  fontSize: size,
  fontWeight: weight,
  letterSpacing: tracking,
  textTransform: transform,
  lineHeight: 1,
});

const TY = {
  hero:  t("clamp(4.5rem,13vw,11rem)", 800, "-0.02em", "uppercase"),
  h1:    t("clamp(2.2rem,5vw,4.5rem)",  800, "-0.01em", "uppercase"),
  h2:    t("clamp(1.6rem,3vw,2.2rem)",  800, "-0.01em", "uppercase"),
  h3:    t("1rem", 700, "0.01em", "uppercase"),
  spec:  t("0.8rem", 400, "0.02em", "none"),
  body:  t("0.95rem", 400, "normal", "none"),
  label: t("0.62rem", 700, "0.28em", "uppercase"),
  nav:   t("0.62rem", 700, "0.2em", "uppercase"),
  micro: t("0.58rem", 400, "0.25em", "uppercase"),
};

const section = { background: C.bg, padding: "6rem 0", borderTop: `1px solid ${C.line}` };
const sectionAlt = { ...section, background: C.bgAlt };
const inner = { maxWidth: "1280px", margin: "0 auto", padding: "0 3rem" };

const btnBase = {
  ...TY.nav, cursor: "pointer", padding: "11px 24px",
  border: "none", transition: "opacity 0.15s, background 0.15s, color 0.15s",
};
const btnPrimary = { ...btnBase, background: C.white, color: C.bg };
const btnGhost = { ...btnBase, background: "transparent", border: `1px solid ${C.gray4}`, color: C.gray2 };

Object.assign(window, { C, F, t, TY, section, sectionAlt, inner, btnBase, btnPrimary, btnGhost });