/* Web DS – base: surfaces, typography, grid. Values come from fx-tokens.js (--fx-*). */

.fx,
[data-fx-theme] {
  color: var(--fx-core-content-primary);
  background: var(--fx-core-background-primary);
  font-family: 'Noto Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* Headings – Manrope Bold, size per platform (desktop / tablet / mobile) */
.fx-h1, .fx-h2, .fx-h3, .fx-h4, .fx-h5, .fx-promo {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
}
.fx-promo { font-size: var(--fx-promo-size); line-height: var(--fx-promo-lh); }
.fx-h1 { font-size: var(--fx-h1-size); line-height: var(--fx-h1-lh); }
.fx-h2 { font-size: var(--fx-h2-size); line-height: var(--fx-h2-lh); }
.fx-h3 { font-size: var(--fx-h3-size); line-height: var(--fx-h3-lh); }
.fx-h4 { font-size: var(--fx-h4-size); line-height: var(--fx-h4-lh); }
.fx-h5 { font-size: var(--fx-h5-size); line-height: var(--fx-h5-lh); }

/* Body – Noto Sans. Headline = SemiBold, Paragraph = Regular, --tight = shorter line-height */
.fx-headline-lg, .fx-headline-md, .fx-headline-sm { margin: 0; font-weight: 600; }
.fx-text-lg, .fx-text-md, .fx-text-sm, .fx-caption { margin: 0; font-weight: 400; }

.fx-headline-lg, .fx-text-lg { font-size: 18px; line-height: 28px; }
.fx-headline-md, .fx-text-md { font-size: 16px; line-height: 24px; }
.fx-headline-sm, .fx-text-sm { font-size: 14px; line-height: 20px; }
.fx-headline-lg.fx-tight, .fx-text-lg.fx-tight { line-height: 24px; }
.fx-headline-md.fx-tight, .fx-text-md.fx-tight { line-height: 20px; }
.fx-headline-sm.fx-tight, .fx-text-sm.fx-tight { line-height: 16px; }
.fx-text-lg + .fx-text-lg { margin-top: 16px; }
.fx-text-md + .fx-text-md { margin-top: 12px; }
.fx-text-sm + .fx-text-sm { margin-top: 8px; }
.fx-caption { font-size: 12px; line-height: 16px; }

.fx-secondary { color: var(--fx-core-content-secondary); }
.fx-tertiary { color: var(--fx-core-content-tertiary); }

/* Grid – columns / gutter / margin per breakpoint (XS 320 … XL 1440) */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(var(--fx-grid-cols), minmax(0, 1fr));
  column-gap: var(--fx-grid-gutter);
  padding-inline: var(--fx-grid-margin);
}

/* Column overlay: same maths as the grid, drawn as a background on the content box */
.fx-grid-overlay {
  --col: calc((100% - (var(--fx-grid-cols) - 1) * var(--fx-grid-gutter)) / var(--fx-grid-cols));
  background-image: repeating-linear-gradient(to right,
    color-mix(in srgb, var(--fx-magmar-40) 12%, transparent) 0 var(--col),
    transparent var(--col) calc(var(--col) + var(--fx-grid-gutter)));
  background-origin: content-box;
  background-clip: content-box;
}