/* WeCreate typography tokens.
   Source: consumer-ui-web lib/theme.ts (createTypographyGenerator: base 14px, modular scale 1.2,
   weights 400/500/600/700, fluid clamp() for h1–h4 between 320–1280px viewports). */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Headings — fluid */
  --type-h1-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); /* @kind spacing */ /* 28–40px, bold */
  --type-h2-size: clamp(1.375rem, 1.1667rem + 1.0417vw, 2rem); /* @kind spacing */ /* 22–32px, semibold */
  --type-h3-size: clamp(1.125rem, 0.9583rem + 0.8333vw, 1.625rem); /* @kind spacing */ /* 18–26px, semibold */
  --type-h4-size: clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem); /* @kind spacing */ /* 18–22px, medium */

  /* Fixed sizes (modular scale 1.2 on 14px base) */
  --type-h5-size: 1.125rem; /* 18px, semibold */
  --type-h6-size: 1rem; /* 16px, semibold */
  --type-subtitle1-size: 1rem; /* 16px, medium */
  --type-subtitle2-size: 0.875rem; /* 14px, medium */
  --type-body1-size: 1rem; /* 16px, regular, lh 1.5 */
  --type-body2-size: 0.875rem; /* 14px, regular, lh ~1.43 */
  --type-button-size: 0.875rem; /* 14px, semibold, uppercase, ls .02em */
  --type-caption-size: 0.75rem; /* 12px, regular */
  --type-overline-size: 0.75rem; /* 12px, semibold, uppercase, ls .1em */

  --leading-tight: 1.2;
  --leading-body: 1.5;
  --leading-dense: 1.43;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body1-size);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background-color: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Utility classes mirroring the MUI typography variants used in the app */
.t-h1 { font-size: var(--type-h1-size); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.t-h2 { font-size: var(--type-h2-size); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.t-h3 { font-size: var(--type-h3-size); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.t-h4 { font-size: var(--type-h4-size); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.t-h5 { font-size: var(--type-h5-size); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.t-h6 { font-size: var(--type-h6-size); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.t-subtitle1 { font-size: var(--type-subtitle1-size); font-weight: var(--weight-medium); line-height: var(--leading-body); }
.t-subtitle2 { font-size: var(--type-subtitle2-size); font-weight: var(--weight-medium); line-height: var(--leading-dense); }
.t-body1 { font-size: var(--type-body1-size); font-weight: var(--weight-regular); line-height: var(--leading-body); }
.t-body2 { font-size: var(--type-body2-size); font-weight: var(--weight-regular); line-height: var(--leading-dense); }
.t-button { font-size: var(--type-button-size); font-weight: var(--weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.71; }
.t-caption { font-size: var(--type-caption-size); font-weight: var(--weight-regular); line-height: 1.33; }
.t-overline { font-size: var(--type-overline-size); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.33; }