/*
 * Herald's typography: one font, one scale of text roles and three weights, so that every page
 * reads alike (docs/superpowers/specs/2026-09-24-typography-design.md).
 *
 * The tokens name the scale once. The rules after them point the theme's own elements, utilities
 * and components at the tokens, so a view keeps its classes and still lands on the scale. The role
 * classes are for new markup, which should name a role rather than a size.
 *
 * The theme measures every margin and padding in rem from a 13px root (12px on a phone), so the
 * root is left as it is: moving it would move the whole layout. Text takes its size from the tokens
 * in px instead, and so is the same size on every screen.
 */

/* --- The scale --- */
:root {
    /* The one font. The fonts it can be are declared in fonts/fonts-herald.css. */
    --font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /*
     * Each role is a size and a line height. The line height is a ratio rather than a length, so
     * text that inherits it under a parent of another size still gets a line height in proportion.
     */
    --font-size-h1: 28px;
    --line-height-h1: calc(36 / 28);
    --font-size-h2: 24px;
    --line-height-h2: calc(32 / 24);
    --font-size-h3: 20px;
    --line-height-h3: calc(28 / 20);
    --font-size-h4: 18px;
    --line-height-h4: calc(26 / 18);
    --font-size-h5: 16px;
    --line-height-h5: calc(24 / 16);
    --font-size-h6: 14px;
    --line-height-h6: calc(20 / 14);
    --font-size-body-1: 16px;
    --line-height-body-1: calc(24 / 16);
    --font-size-body-2: 14px;
    --line-height-body-2: calc(20 / 14);
    --font-size-caption-1: 13px;
    --line-height-caption-1: calc(18 / 13);
    --font-size-caption-2: 12px;
    --line-height-caption-2: calc(16 / 12);
    --font-size-button: 14px;
    --line-height-button: calc(20 / 14);
    --font-size-button-sm: 13px;
    --line-height-button-sm: calc(18 / 13);
    --font-size-button-lg: 16px;
    --line-height-button-lg: calc(24 / 16);

    /* The three largest headings sit a little tighter, as large type needs. */
    --letter-spacing-heading: -0.01em;

    /* The same values under the names Bootstrap, the theme and CKEditor read them by. */
    --bs-font-sans-serif: var(--font-family-base);
    --bs-font-monospace: var(--font-family-mono);
    --bs-body-font-family: var(--font-family-base);
    --bs-body-font-size: var(--font-size-body-2);
    --bs-body-font-weight: var(--font-weight-regular);
    --bs-body-line-height: var(--line-height-body-2);
    --ck-font-face: var(--font-family-base);
}

/* --- Base elements --- */
html,
body {
    font-family: var(--font-family-base);
}

/* The theme forces 13px (12px on a phone) on the body as well as the root, with !important. */
body {
    font-size: var(--font-size-body-2) !important;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-2);
}

h1,
.h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-h1);
}

h2,
.h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
}

h3,
.h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}

h4,
.h4 {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
}

h5,
.h5 {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
}

h6,
.h6 {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: var(--font-weight-bold);
}

h1, .h1, h2, .h2, h3, .h3 {
    letter-spacing: var(--letter-spacing-heading);
}

b,
strong {
    font-weight: var(--font-weight-bold);
}

small,
.small {
    font-size: var(--font-size-caption-1);
}

.lead {
    font-size: var(--font-size-body-1);
    font-weight: var(--font-weight-regular);
}

/* The error pages' large lines are the largest heading, not a size of their own. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
}

code,
kbd,
pre,
samp {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-caption-1);
}

/*
 * --- The theme's size utilities, each moved to the nearest step of the scale ---
 * They set the size only, as Bootstrap's do. fs-2x and fs-3x size icons and are left as they are.
 */
.fs-2qx {
    font-size: var(--font-size-h1) !important;
}

.fs-1 {
    font-size: var(--font-size-h2) !important;
}

.fs-2 {
    font-size: var(--font-size-h3) !important;
}

.fs-3 {
    font-size: var(--font-size-h4) !important;
}

.fs-4,
.fs-5 {
    font-size: var(--font-size-body-1) !important;
}

.fs-6,
.fs-base {
    font-size: var(--font-size-body-2) !important;
}

.fs-7 {
    font-size: var(--font-size-caption-1) !important;
}

.fs-8 {
    font-size: var(--font-size-caption-2) !important;
}

/* --- Roles, for new markup: name the role, and the size, line height and weight follow --- */
.text-h1 {
    font-size: var(--font-size-h1) !important;
    line-height: var(--line-height-h1) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-heading);
}

.text-h2 {
    font-size: var(--font-size-h2) !important;
    line-height: var(--line-height-h2) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-heading);
}

.text-h3 {
    font-size: var(--font-size-h3) !important;
    line-height: var(--line-height-h3) !important;
    font-weight: var(--font-weight-bold) !important;
    letter-spacing: var(--letter-spacing-heading);
}

.text-h4 {
    font-size: var(--font-size-h4) !important;
    line-height: var(--line-height-h4) !important;
    font-weight: var(--font-weight-bold) !important;
}

.text-h5 {
    font-size: var(--font-size-h5) !important;
    line-height: var(--line-height-h5) !important;
    font-weight: var(--font-weight-bold) !important;
}

.text-h6 {
    font-size: var(--font-size-h6) !important;
    line-height: var(--line-height-h6) !important;
    font-weight: var(--font-weight-bold) !important;
}

.text-body-1 {
    font-size: var(--font-size-body-1) !important;
    line-height: var(--line-height-body-1) !important;
    font-weight: var(--font-weight-regular) !important;
}

.text-body-2 {
    font-size: var(--font-size-body-2) !important;
    line-height: var(--line-height-body-2) !important;
    font-weight: var(--font-weight-regular) !important;
}

.text-caption-1 {
    font-size: var(--font-size-caption-1) !important;
    line-height: var(--line-height-caption-1) !important;
    font-weight: var(--font-weight-regular) !important;
}

.text-caption-2 {
    font-size: var(--font-size-caption-2) !important;
    line-height: var(--line-height-caption-2) !important;
    font-weight: var(--font-weight-regular) !important;
}

.text-button {
    font-size: var(--font-size-button) !important;
    line-height: var(--line-height-button) !important;
    font-weight: var(--font-weight-medium) !important;
}

/*
 * --- The three weights, and nothing between them ---
 * They come after the roles so that a weight class can change a role's own weight.
 */
.fw-light,
.fw-lighter,
.fw-normal,
.fw-regular {
    font-weight: var(--font-weight-regular) !important;
}

.fw-semibold,
.fw-medium {
    font-weight: var(--font-weight-medium) !important;
}

.fw-bold,
.fw-bolder {
    font-weight: var(--font-weight-bold) !important;
}

/* --- Components --- */

/*
 * A button's height is its line height plus its padding, and so is an input's. Both take the same
 * line from the scale at each size, so a button and an input still sit level in one row.
 */
.btn {
    --bs-btn-font-family: var(--font-family-base);
    --bs-btn-font-size: var(--font-size-button);
    --bs-btn-font-weight: var(--font-weight-medium);
    --bs-btn-line-height: var(--line-height-button);
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-font-size: var(--font-size-button-sm);
    --bs-btn-line-height: var(--line-height-button-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: var(--font-size-button-lg);
    --bs-btn-line-height: var(--line-height-button-lg);
}

.form-label,
.col-form-label {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-2);
}

.form-control,
.form-select,
.input-group-text {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-2);
}

.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.col-form-label-sm {
    font-size: var(--font-size-caption-1);
    line-height: var(--line-height-caption-1);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.col-form-label-lg {
    font-size: var(--font-size-body-1);
    line-height: var(--line-height-body-1);
}

.form-text,
.invalid-feedback,
.valid-feedback {
    font-size: var(--font-size-caption-1);
    line-height: var(--line-height-caption-1);
}

/* Figures in a table line up, and its header reads as a label rather than as another row of data. */
.table {
    font-variant-numeric: tabular-nums;
}

.table > tbody > tr > td {
    font-size: var(--font-size-body-2);
}

.table > thead > tr > th,
.table > thead > tr > td {
    font-size: var(--font-size-caption-1);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-caption-1);
}

.badge {
    --bs-badge-font-size: var(--font-size-caption-2);
    --bs-badge-font-weight: var(--font-weight-medium);
}

.dropdown-menu {
    --bs-dropdown-font-size: var(--font-size-body-2);
}

.breadcrumb {
    --bs-breadcrumb-font-size: var(--font-size-caption-1);
}

.pagination {
    --bs-pagination-font-size: var(--font-size-body-2);
}

.toast {
    --bs-toast-font-size: var(--font-size-body-2);
}

.tooltip {
    --bs-tooltip-font-size: var(--font-size-caption-1);
    line-height: var(--line-height-caption-1);
}

.popover {
    --bs-popover-font-size: var(--font-size-body-2);
    --bs-popover-header-font-size: var(--font-size-h6);
    line-height: var(--line-height-body-2);
}

.popover .popover-header {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h6);
}

.modal-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h4);
}

.card .card-header .card-title,
.card .card-header .card-title .card-label {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h5);
}

/* On the dashboard a card is a widget, and its title is a section's. */
#Dashboard .card .card-header .card-title,
#Dashboard .card .card-header .card-title .card-label {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    letter-spacing: var(--letter-spacing-heading);
}

/* --- Plugins that bring type of their own --- */

/* The fonts they name themselves, answered with the one font. */
.select2-container .select2-search--inline .select2-search__field,
.daterangepicker,
.ql-container,
.ql-toolbar,
.ql-toolbar.ql-snow,
.leaflet-container,
.leaflet-container .leaflet-popup-content-wrapper .leaflet-popup-content,
.dx-widget,
.dx-widget input,
.dx-widget textarea,
.et-theme-fluent-typography,
.et-theme-fluent-typography input,
.et-theme-fluent-typography textarea,
.et-widget,
.et-widget input,
.et-widget textarea,
.et-field,
.et-field input,
.et-field textarea,
.et-overlay-wrapper,
.et-overlay-wrapper input,
.et-overlay-wrapper textarea,
.et-datagrid-column-chooser,
.et-datagrid-column-chooser input,
.et-datagrid-column-chooser textarea,
.et-treelist-column-chooser,
.et-treelist-column-chooser input,
.et-treelist-column-chooser textarea {
    font-family: var(--font-family-base);
}

/* The theme names ApexCharts' font with !important, so the answer has to be as firm. */
.apexcharts-text,
.apexcharts-title-text,
.apexcharts-legend-text {
    font-family: var(--font-family-base) !important;
}

/* The grid's (et-grid, a renamed DevExtreme) bold is 700; the scale's is 600. */
.et-datagrid-summary-item,
.et-treelist-summary-item,
.et-scheduler-agenda .et-scheduler-appointment-title,
.et-scheduler-agenda .et-scheduler-group-header,
.et-scheduler-date-table-current-date,
.et-scheduler-work-space-month.et-scheduler-work-space-count .et-scheduler-date-table-first-of-month {
    font-weight: var(--font-weight-bold);
}

.ql-container {
    font-size: var(--font-size-body-2);
}

/* Select2: the theme sizes a chosen item at three sizes with long selectors, so these carry !important. */
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice .select2-selection__choice__display {
    font-size: var(--font-size-body-2) !important;
}

.select2-container--bootstrap5 .select2-selection--multiple.form-select-sm .select2-selection__choice .select2-selection__choice__display {
    font-size: var(--font-size-caption-1) !important;
}

.select2-container--bootstrap5 .select2-selection--multiple.form-select-lg .select2-selection__choice .select2-selection__choice__display {
    font-size: var(--font-size-body-1) !important;
}

.select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
    font-size: var(--font-size-body-2);
}

.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--group,
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--group .select2-results__group {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
}

/* DataTables */
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_info .select-info,
div.dataTables_wrapper div.dataTables_info .select-item {
    font-size: var(--font-size-caption-1);
    font-weight: var(--font-weight-regular);
}

div.dataTables_wrapper div.dataTables_processing {
    font-weight: var(--font-weight-medium);
}

/* SweetAlert2, which abp.message opens */
.swal2-popup {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-2);
}

.swal2-popup .swal2-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h4);
}

.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content,
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-2);
}

.swal2-popup .swal2-validation-message,
.swal2-popup .swal2-footer {
    font-size: var(--font-size-caption-1);
    font-weight: var(--font-weight-regular);
}

/* toastr, which abp.notify opens, under both its own class names and the theme's */
.toast-title,
.toastr .toastr-title {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-body-2);
}

.toast-message,
.toastr .toastr-message {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-2);
}

/* flatpickr */
.flatpickr-calendar,
.flatpickr-day {
    font-size: var(--font-size-body-2);
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time .flatpickr-am-pm {
    font-size: var(--font-size-body-2);
    font-weight: var(--font-weight-medium);
}

span.flatpickr-weekday {
    font-size: var(--font-size-caption-1);
    font-weight: var(--font-weight-medium);
}

/* The date-range picker */
.daterangepicker {
    font-size: var(--font-size-body-2);
    line-height: var(--line-height-body-2);
}

.daterangepicker .ranges li,
.daterangepicker .drp-calendar td,
.daterangepicker .drp-calendar th.month {
    font-size: var(--font-size-body-2);
}

.daterangepicker .drp-calendar th,
.daterangepicker .drp-selected,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    font-size: var(--font-size-caption-1);
}

.daterangepicker .ranges li,
.daterangepicker .drp-calendar th,
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    font-weight: var(--font-weight-medium);
}

.daterangepicker .drp-calendar td {
    font-weight: var(--font-weight-regular);
}

.daterangepicker .drp-buttons .btn {
    font-size: var(--font-size-button-sm);
    line-height: var(--line-height-button-sm);
}