@use "sass:map";
@use "../../base/font" as ft;
@use "../../base/mixins/meta-class" as mc;
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");

@include mc.meta("qo-font-family-primary", (font-family: ft.$font-family-primary));
@include mc.meta("qo-font-family-secondary", (font-family: ft.$font-family-secondary));

@include mc.meta("qo-font-xxs", (font-size: ft.$font-size-xxs, line-height: ft.$line-height-xxs));
@include mc.meta("qo-font-xs", (font-size: ft.$font-size-xs, line-height: ft.$line-height-xs));
@include mc.meta("qo-font-sm", (font-size: ft.$font-size-sm, line-height: ft.$line-height-sm));
@include mc.meta("qo-font-md", (font-size: ft.$font-size-md, line-height: ft.$line-height-md));
@include mc.meta("qo-font-lg", (font-size: ft.$font-size-lg, line-height: ft.$line-height-lg));
@include mc.meta("qo-font-xl", (font-size: ft.$font-size-xl, line-height: ft.$line-height-xl));
@include mc.meta("qo-font-xxl", (font-size: ft.$font-size-xxl, line-height: ft.$line-height-xxl));

// ── Headings ─────────────────────────────────────────────────────────────────
// `qo-h1` … `qo-h6`, the design system's heading series. Each carries size,
// leading and weight together, because those three are what make a heading a
// heading — a `qo-font-*` class is one step of the size ramp and nothing else,
// so it cannot express H4, H5 and H6, which sit at or below the body size and
// are distinguished by weight alone.
//
// Deliberately NOT margins. Every other utility in this file sets only the
// properties it names, and a heading's spacing belongs to the layout it sits
// in — compose with `qo-mb-*` rather than having every heading arrive with an
// opinion about the gap under it.
//
// The class is independent of the element: `qo-h2` on an `<h1>` is a page title
// that should look like a section title, which is a normal thing to want and
// the reason a heading's LOOK and its OUTLINE LEVEL are separate decisions. The
// `H1`…`H6` widgets in procode-lowcode-kendo-widget pick the element; this
// picks the appearance.
@each $level in (1, 2, 3, 4, 5, 6) {
  @include mc.meta(
    "qo-h#{$level}",
    (
      font-size: map.get(ft.$heading-sizes, $level),
      line-height: ft.$line-height-heading,
      font-weight: ft.$font-weight-heading,
    )
  );
}

@include mc.meta("qo-font-weight-light", (font-weight: ft.$font-weight-light));
@include mc.meta("qo-font-weight-regular", (font-weight: ft.$font-weight-regular));
@include mc.meta("qo-font-weight-medium", (font-weight: ft.$font-weight-medium));
@include mc.meta("qo-font-weight-semibold", (font-weight: ft.$font-weight-semibold));
@include mc.meta("qo-font-weight-bold", (font-weight: ft.$font-weight-bold));
@include mc.meta("qo-font-weight-extrabold", (font-weight: ft.$font-weight-extrabold));

.qo-validation {
  font-size: ft.$font-size-md;
  line-height: ft.$line-height-md;
  font-family: ft.$font-family-primary;
  font-weight: ft.$font-weight-light;
  margin-top: 2px;
}

h4 {
  font-size: ft.$font-size-md;
  line-height: ft.$line-height-md;
  font-family: ft.$font-family-primary;
  font-weight: ft.$font-weight-medium;
}