/* POP typography contract. See docs/UI_TYPOGRAPHY.md before adding new sizes.
   Load after Tabler and pop.css; use semantic headings or the role classes. */
:root {
    --pop-font-family: var(--tblr-font-sans-serif, system-ui, sans-serif);
    --pop-text-body: 0.875rem;
    --pop-text-content: 0.875rem;
    --pop-text-page-title: 1.5rem;
    --pop-text-section-title: 1rem;
    --pop-text-subsection-title: 0.9375rem;
    --pop-text-control: 0.875rem;
    --pop-text-input: 1rem;
    --pop-text-help: 0.8125rem;
    --pop-text-caption: 0.75rem;
    --pop-text-navigation: 0.9375rem;
    --pop-text-navigation-heading: 1rem;
    --pop-text-metric: 1.5rem;
    --pop-text-value: 1.125rem;
    --pop-text-feature: 1.25rem;
    --pop-text-brand: 1rem;
    --pop-text-symbol: 0.6875rem;
    --pop-text-action-icon: 1.375rem;
    --pop-weight-normal: 400;
    --pop-weight-medium: 500;
    --pop-weight-semibold: 600;
    --pop-weight-bold: 700;
    --pop-leading-body: 1.5;
    --pop-leading-heading: 1.35;
}

@media (min-width: 992px) {
    :root {
        --pop-text-body: 0.9375rem;
        --pop-text-content: 1.0625rem;
        --pop-text-page-title: 1.875rem;
        --pop-text-section-title: 1.125rem;
        --pop-text-subsection-title: 1rem;
        --pop-text-input: 0.875rem;
    }
}

body.pop-ui {
    font-family: var(--pop-font-family);
    font-size: var(--pop-text-body);
    font-weight: var(--pop-weight-normal);
    line-height: var(--pop-leading-body);
}

/* The bordered-panel selector supports existing CRM templates. New panels
   should use .card or the explicit .pop-content role. Headings never depend
   on which panel surrounds them. */
.pop-ui :is(.card, .modal-content, .pop-content, .border.rounded-2.bg-white) {
    font-size: var(--pop-text-content);
    line-height: var(--pop-leading-body);
}

.pop-ui h1,
.pop-ui .pop-page-title {
    font-size: var(--pop-text-page-title);
    font-weight: var(--pop-weight-bold);
    line-height: var(--pop-leading-heading);
}

.pop-ui h2,
.pop-ui .card-title,
.pop-ui .modal-title,
.pop-ui .pop-section-title {
    font-size: var(--pop-text-section-title);
    font-weight: var(--pop-weight-bold);
    line-height: var(--pop-leading-heading);
}

.pop-ui h3,
.pop-ui .pop-subsection-title {
    font-size: var(--pop-text-subsection-title);
    font-weight: var(--pop-weight-semibold);
    line-height: var(--pop-leading-heading);
}

.pop-ui h4,
.pop-ui h5,
.pop-ui h6,
.pop-ui .pop-group-title {
    font-size: var(--pop-text-control);
    font-weight: var(--pop-weight-semibold);
    line-height: var(--pop-leading-heading);
}

.pop-ui :is(small, .small, .form-text, .pop-help-text) {
    font-size: var(--pop-text-help);
    line-height: var(--pop-leading-body);
}

.pop-ui :is(.pop-caption, .badge) {
    font-size: var(--pop-text-caption);
    line-height: var(--pop-leading-body);
}

.pop-ui .form-label,
.pop-ui .form-check-label {
    font-size: var(--pop-text-control);
    font-weight: var(--pop-weight-medium);
}

.pop-ui .pop-work-queue-group-title {
    font-size: var(--pop-text-control);
    font-weight: var(--pop-weight-semibold);
    line-height: var(--pop-leading-heading);
}

.pop-ui :is(.form-control, .form-select, .input-group-text) {
    font-size: var(--pop-text-input);
    line-height: var(--pop-leading-body);
}

.pop-ui :is(.btn, .dropdown-item) {
    font-size: var(--pop-text-control);
}

.pop-ui .btn-sm {
    font-size: var(--pop-text-help);
}

.pop-ui .btn-lg {
    font-size: var(--pop-text-navigation-heading);
}

/* Caption-sized navigation and icon glyphs retain their existing touch areas. */
.pop-ui .field-nav-link {
    font-size: var(--pop-text-caption);
}

.pop-ui .pop-table-actions-toggle {
    font-size: var(--pop-text-action-icon);
}

.pop-ui .navbar-brand {
    font-size: var(--pop-text-brand);
}

.pop-ui .accordion-button {
    font-size: var(--pop-text-subsection-title);
    font-weight: var(--pop-weight-semibold);
}

.pop-ui .table {
    font-size: var(--pop-text-body);
}

.pop-ui .table thead th {
    font-size: var(--pop-text-caption);
    font-weight: var(--pop-weight-semibold);
}

.pop-ui .pop-metric {
    font-size: var(--pop-text-metric);
    font-weight: var(--pop-weight-semibold);
    line-height: var(--pop-leading-heading);
}

.pop-ui .pop-value {
    font-size: var(--pop-text-value);
    font-weight: var(--pop-weight-semibold);
    line-height: var(--pop-leading-heading);
}

@media (max-width: 375px) {
    .pop-ui .field-date-nav .btn {
        font-size: var(--pop-text-help);
    }
}