/* ==============================================
   TYPOGRAPHY
   ============================================== */

@font-face {
    font-family: "Inter";
    src: url("../../fonts/inter/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
}

* {
    font-family: var(--font-primary, "Inter", sans-serif);
    font-optical-sizing: auto;
}

body {
    font-family: var(--font-primary, "Inter", sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    line-height: 1.2;
}

/* Global section-level typography utilities */
.section-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    padding-left: var(--space-sm);
}

.page-title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.section-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Reusable label for input fields inside modals and forms (overline/tag style).
   Apply class="form-field-label" to any <label> or <p> above an input.
   Component CSS may override margin if needed (e.g. centered column headers). */
.form-field-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    margin: 0 0 var(--space-sm) var(--space-sm);
    display: block;
}
