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

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/*
 * Logic365 application typography contract.
 *
 * This stylesheet is loaded only for application runtime surfaces. Provider-management UI is
 * intentionally outside .l365-app and cannot inherit these tokens. Component-specific provider
 * CSS may still override an attribute explicitly; otherwise every text-bearing component resolves
 * one of the semantic roles below.
 */
.l365-app {
    font-family: var(--l365-type-body-font-family);
    font-size: var(--l365-type-body-font-size);
    font-weight: var(--l365-type-body-font-weight);
    line-height: var(--l365-type-body-line-height);
    letter-spacing: var(--l365-type-body-letter-spacing);
    font-style: var(--l365-type-body-font-style);
    text-transform: var(--l365-type-body-text-transform);
    text-rendering: optimizeLegibility;
}

.l365-app :where(h1, .l365-type-h1) {
    font-family: var(--l365-type-h1-font-family);
    font-size: var(--l365-type-h1-font-size);
    font-weight: var(--l365-type-h1-font-weight);
    line-height: var(--l365-type-h1-line-height);
    letter-spacing: var(--l365-type-h1-letter-spacing);
    font-style: var(--l365-type-h1-font-style);
    text-transform: var(--l365-type-h1-text-transform);
}

.l365-app :where(h2, .l365-type-h2) {
    font-family: var(--l365-type-h2-font-family);
    font-size: var(--l365-type-h2-font-size);
    font-weight: var(--l365-type-h2-font-weight);
    line-height: var(--l365-type-h2-line-height);
    letter-spacing: var(--l365-type-h2-letter-spacing);
    font-style: var(--l365-type-h2-font-style);
    text-transform: var(--l365-type-h2-text-transform);
}

.l365-app :where(h3, .l365-type-h3) {
    font-family: var(--l365-type-h3-font-family);
    font-size: var(--l365-type-h3-font-size);
    font-weight: var(--l365-type-h3-font-weight);
    line-height: var(--l365-type-h3-line-height);
    letter-spacing: var(--l365-type-h3-letter-spacing);
    font-style: var(--l365-type-h3-font-style);
    text-transform: var(--l365-type-h3-text-transform);
}

.l365-app :where(h4, .l365-type-h4) {
    font-family: var(--l365-type-h4-font-family);
    font-size: var(--l365-type-h4-font-size);
    font-weight: var(--l365-type-h4-font-weight);
    line-height: var(--l365-type-h4-line-height);
    letter-spacing: var(--l365-type-h4-letter-spacing);
    font-style: var(--l365-type-h4-font-style);
    text-transform: var(--l365-type-h4-text-transform);
}

.l365-app :where(p, li, td, dd, .l365-type-body, .c365-tile-content) {
    font-family: var(--l365-type-body-font-family);
    font-size: var(--l365-type-body-font-size);
    font-weight: var(--l365-type-body-font-weight);
    line-height: var(--l365-type-body-line-height);
    letter-spacing: var(--l365-type-body-letter-spacing);
    font-style: var(--l365-type-body-font-style);
    text-transform: var(--l365-type-body-text-transform);
}

.l365-app :where(small, .l365-type-body-small, .c365-empty-state, .c365-tile-description, .validation-message, .field-validation-error) {
    font-family: var(--l365-type-body-small-font-family);
    font-size: var(--l365-type-body-small-font-size);
    font-weight: var(--l365-type-body-small-font-weight);
    line-height: var(--l365-type-body-small-line-height);
    letter-spacing: var(--l365-type-body-small-letter-spacing);
    font-style: var(--l365-type-body-small-font-style);
    text-transform: var(--l365-type-body-small-text-transform);
}

.l365-app :where(label, th, button, input, textarea, select, .btn, .dropdown-item, .nav-link, .c365-nav__link, .l365-type-label,
    .c365-date-filter, .c365-page-control, .c365-status-badge) {
    font-family: var(--l365-type-label-font-family);
    font-size: var(--l365-type-label-font-size);
    font-weight: var(--l365-type-label-font-weight);
    line-height: var(--l365-type-label-line-height);
    letter-spacing: var(--l365-type-label-letter-spacing);
    font-style: var(--l365-type-label-font-style);
    text-transform: var(--l365-type-label-text-transform);
}

.l365-app :where(caption, figcaption, .l365-type-caption, .c365-caption, .c365-tile-meta, time) {
    font-family: var(--l365-type-caption-font-family);
    font-size: var(--l365-type-caption-font-size);
    font-weight: var(--l365-type-caption-font-weight);
    line-height: var(--l365-type-caption-line-height);
    letter-spacing: var(--l365-type-caption-letter-spacing);
    font-style: var(--l365-type-caption-font-style);
    text-transform: var(--l365-type-caption-text-transform);
}

.l365-app :where(.l365-type-metric, .c365-metric, .c365-current-value, [data-c365-metric],
    [class*="__metric"], [class*="__value"], .metric-value, .stat-value) {
    font-family: var(--l365-type-metric-font-family);
    font-size: var(--l365-type-metric-font-size);
    font-weight: var(--l365-type-metric-font-weight);
    line-height: var(--l365-type-metric-line-height);
    letter-spacing: var(--l365-type-metric-letter-spacing);
    font-style: var(--l365-type-metric-font-style);
    text-transform: var(--l365-type-metric-text-transform);
}

/* App navigation keeps one Label role through hover, active, mobile and account-menu states. */
.l365-app .c365-app-header :where(.c365-nav__link, .dropdown-item, .c365-nav__identity-name, .c365-nav__identity-account) {
    font-family: var(--l365-menu-font-family, var(--l365-type-label-font-family));
    font-size: var(--l365-menu-font-size, var(--l365-type-label-font-size));
    font-weight: var(--l365-menu-font-weight, var(--l365-type-label-font-weight));
    line-height: var(--l365-menu-line-height, var(--l365-type-label-line-height));
    letter-spacing: var(--l365-menu-letter-spacing, var(--l365-type-label-letter-spacing));
    font-style: var(--l365-menu-font-style, var(--l365-type-label-font-style));
    text-transform: var(--l365-menu-text-transform, var(--l365-type-label-text-transform));
}

.l365-app .c365-tile-title {
    font-family: var(--l365-tile-title-font-family, var(--l365-type-h2-font-family));
    font-size: var(--l365-tile-title-font-size, var(--l365-type-h2-font-size));
    font-weight: var(--l365-tile-title-font-weight, var(--l365-type-h2-font-weight));
    line-height: var(--l365-tile-title-line-height, var(--l365-type-h2-line-height));
    letter-spacing: var(--l365-tile-title-letter-spacing, var(--l365-type-h2-letter-spacing));
    font-style: var(--l365-tile-title-font-style, var(--l365-type-h2-font-style));
    text-transform: var(--l365-tile-title-text-transform, var(--l365-type-h2-text-transform));
}

.l365-app .c365-tile-content {
    font-family: var(--l365-tile-body-font-family, var(--l365-type-body-font-family));
    font-size: var(--l365-tile-body-font-size, var(--l365-type-body-font-size));
    font-weight: var(--l365-tile-body-font-weight, var(--l365-type-body-font-weight));
    line-height: var(--l365-tile-body-line-height, var(--l365-type-body-line-height));
    letter-spacing: var(--l365-tile-body-letter-spacing, var(--l365-type-body-letter-spacing));
    font-style: var(--l365-tile-body-font-style, var(--l365-type-body-font-style));
    text-transform: var(--l365-tile-body-text-transform, var(--l365-type-body-text-transform));
}

.l365-app .c365-tile-shell :where(label, th, .c365-tile-label) {
    font-family: var(--l365-tile-label-font-family, var(--l365-type-label-font-family));
    font-size: var(--l365-tile-label-font-size, var(--l365-type-label-font-size));
    font-weight: var(--l365-tile-label-font-weight, var(--l365-type-label-font-weight));
    line-height: var(--l365-tile-label-line-height, var(--l365-type-label-line-height));
    letter-spacing: var(--l365-tile-label-letter-spacing, var(--l365-type-label-letter-spacing));
    font-style: var(--l365-tile-label-font-style, var(--l365-type-label-font-style));
    text-transform: var(--l365-tile-label-text-transform, var(--l365-type-label-text-transform));
}

.l365-app .c365-tile-shell :where(.l365-type-metric, .c365-metric, .c365-current-value, [data-c365-metric],
    [class*="__metric"], [class*="__value"], .metric-value, .stat-value) {
    font-family: var(--l365-tile-metric-font-family, var(--l365-type-metric-font-family));
    font-size: var(--l365-tile-metric-font-size, var(--l365-type-metric-font-size));
    font-weight: var(--l365-tile-metric-font-weight, var(--l365-type-metric-font-weight));
    line-height: var(--l365-tile-metric-line-height, var(--l365-type-metric-line-height));
    letter-spacing: var(--l365-tile-metric-letter-spacing, var(--l365-type-metric-letter-spacing));
    font-style: var(--l365-tile-metric-font-style, var(--l365-type-metric-font-style));
    text-transform: var(--l365-tile-metric-text-transform, var(--l365-type-metric-text-transform));
}

/*
 * Explicit role markers are the authoritative component contract. They are intentionally loaded
 * after the older structural styles and have enough specificity to beat component defaults without
 * priority escalation. Provider overrides remain authoritative because Tile markers consume the sparse
 * --l365-tile-* variables emitted by the placement, rather than replacing them with App defaults.
 */
.l365-app [data-l365-type-role="h1"] {
    font-family: var(--l365-type-h1-font-family);
    font-size: var(--l365-type-h1-font-size);
    font-weight: var(--l365-type-h1-font-weight);
    line-height: var(--l365-type-h1-line-height);
    letter-spacing: var(--l365-type-h1-letter-spacing);
    font-style: var(--l365-type-h1-font-style);
    text-transform: var(--l365-type-h1-text-transform);
}

.l365-app [data-l365-type-role="h2"] {
    font-family: var(--l365-type-h2-font-family);
    font-size: var(--l365-type-h2-font-size);
    font-weight: var(--l365-type-h2-font-weight);
    line-height: var(--l365-type-h2-line-height);
    letter-spacing: var(--l365-type-h2-letter-spacing);
    font-style: var(--l365-type-h2-font-style);
    text-transform: var(--l365-type-h2-text-transform);
}

.l365-app [data-l365-type-role="h3"] {
    font-family: var(--l365-type-h3-font-family);
    font-size: var(--l365-type-h3-font-size);
    font-weight: var(--l365-type-h3-font-weight);
    line-height: var(--l365-type-h3-line-height);
    letter-spacing: var(--l365-type-h3-letter-spacing);
    font-style: var(--l365-type-h3-font-style);
    text-transform: var(--l365-type-h3-text-transform);
}

.l365-app [data-l365-type-role="h4"] {
    font-family: var(--l365-type-h4-font-family);
    font-size: var(--l365-type-h4-font-size);
    font-weight: var(--l365-type-h4-font-weight);
    line-height: var(--l365-type-h4-line-height);
    letter-spacing: var(--l365-type-h4-letter-spacing);
    font-style: var(--l365-type-h4-font-style);
    text-transform: var(--l365-type-h4-text-transform);
}

.l365-app [data-l365-type-role="body"] {
    font-family: var(--l365-type-body-font-family);
    font-size: var(--l365-type-body-font-size);
    font-weight: var(--l365-type-body-font-weight);
    line-height: var(--l365-type-body-line-height);
    letter-spacing: var(--l365-type-body-letter-spacing);
    font-style: var(--l365-type-body-font-style);
    text-transform: var(--l365-type-body-text-transform);
}

.l365-app [data-l365-type-role="body-small"] {
    font-family: var(--l365-type-body-small-font-family);
    font-size: var(--l365-type-body-small-font-size);
    font-weight: var(--l365-type-body-small-font-weight);
    line-height: var(--l365-type-body-small-line-height);
    letter-spacing: var(--l365-type-body-small-letter-spacing);
    font-style: var(--l365-type-body-small-font-style);
    text-transform: var(--l365-type-body-small-text-transform);
}

.l365-app [data-l365-type-role="label"] {
    font-family: var(--l365-type-label-font-family);
    font-size: var(--l365-type-label-font-size);
    font-weight: var(--l365-type-label-font-weight);
    line-height: var(--l365-type-label-line-height);
    letter-spacing: var(--l365-type-label-letter-spacing);
    font-style: var(--l365-type-label-font-style);
    text-transform: var(--l365-type-label-text-transform);
}

.l365-app [data-l365-type-role="caption"] {
    font-family: var(--l365-type-caption-font-family);
    font-size: var(--l365-type-caption-font-size);
    font-weight: var(--l365-type-caption-font-weight);
    line-height: var(--l365-type-caption-line-height);
    letter-spacing: var(--l365-type-caption-letter-spacing);
    font-style: var(--l365-type-caption-font-style);
    text-transform: var(--l365-type-caption-text-transform);
}

.l365-app [data-l365-type-role="metric"] {
    font-family: var(--l365-type-metric-font-family);
    font-size: var(--l365-type-metric-font-size);
    font-weight: var(--l365-type-metric-font-weight);
    line-height: var(--l365-type-metric-line-height);
    letter-spacing: var(--l365-type-metric-letter-spacing);
    font-style: var(--l365-type-metric-font-style);
    text-transform: var(--l365-type-metric-text-transform);
}

.l365-app [data-l365-type-role="menu"] {
    font-family: var(--l365-menu-font-family, var(--l365-type-label-font-family));
    font-size: var(--l365-menu-font-size, var(--l365-type-label-font-size));
    font-weight: var(--l365-menu-font-weight, var(--l365-type-label-font-weight));
    line-height: var(--l365-menu-line-height, var(--l365-type-label-line-height));
    letter-spacing: var(--l365-menu-letter-spacing, var(--l365-type-label-letter-spacing));
    font-style: var(--l365-menu-font-style, var(--l365-type-label-font-style));
    text-transform: var(--l365-menu-text-transform, var(--l365-type-label-text-transform));
}

/* Primary app navigation shares the standard menu size. A page's explicit
   menu font-size override remains authoritative. */
.l365-app .c365-app-header__menu .c365-nav__link { font-size: 14px; }
.l365-app .c365-app-header__menu .c365-nav__child-item--font-overridden .c365-nav__link {
    font-size: var(--l365-menu-font-size, var(--l365-type-label-font-size));
}

.l365-app .c365-tile-shell [data-l365-type-role="tile-title"] {
    font-family: var(--l365-tile-title-font-family, var(--l365-type-h2-font-family));
    font-size: var(--l365-tile-title-font-size, var(--l365-type-h2-font-size));
    font-weight: var(--l365-tile-title-font-weight, var(--l365-type-h2-font-weight));
    line-height: var(--l365-tile-title-line-height, var(--l365-type-h2-line-height));
    letter-spacing: var(--l365-tile-title-letter-spacing, var(--l365-type-h2-letter-spacing));
    font-style: var(--l365-tile-title-font-style, var(--l365-type-h2-font-style));
    text-transform: var(--l365-tile-title-text-transform, var(--l365-type-h2-text-transform));
}

.l365-app .c365-tile-shell :is([data-l365-type-role="tile-body"], .c365-html-hero__summary) {
    font-family: var(--l365-tile-body-font-family, var(--l365-type-body-font-family));
    font-size: var(--l365-tile-body-font-size, var(--l365-type-body-font-size));
    font-weight: var(--l365-tile-body-font-weight, var(--l365-type-body-font-weight));
    line-height: var(--l365-tile-body-line-height, var(--l365-type-body-line-height));
    letter-spacing: var(--l365-tile-body-letter-spacing, var(--l365-type-body-letter-spacing));
    font-style: var(--l365-tile-body-font-style, var(--l365-type-body-font-style));
    text-transform: var(--l365-tile-body-text-transform, var(--l365-type-body-text-transform));
}

.l365-app .c365-tile-shell :is([data-l365-type-role="tile-label"], .c365-html-hero__eyebrow) {
    font-family: var(--l365-tile-label-font-family, var(--l365-type-label-font-family));
    font-size: var(--l365-tile-label-font-size, var(--l365-type-label-font-size));
    font-weight: var(--l365-tile-label-font-weight, var(--l365-type-label-font-weight));
    line-height: var(--l365-tile-label-line-height, var(--l365-type-label-line-height));
    letter-spacing: var(--l365-tile-label-letter-spacing, var(--l365-type-label-letter-spacing));
    font-style: var(--l365-tile-label-font-style, var(--l365-type-label-font-style));
    text-transform: var(--l365-tile-label-text-transform, var(--l365-type-label-text-transform));
}

.l365-app .c365-tile-shell :is([data-l365-type-role="tile-metric"], .c365-html-hero__value) {
    font-family: var(--l365-tile-metric-font-family, var(--l365-type-metric-font-family));
    font-size: var(--l365-tile-metric-font-size, var(--l365-type-metric-font-size));
    font-weight: var(--l365-tile-metric-font-weight, var(--l365-type-metric-font-weight));
    line-height: var(--l365-tile-metric-line-height, var(--l365-type-metric-line-height));
    letter-spacing: var(--l365-tile-metric-letter-spacing, var(--l365-type-metric-letter-spacing));
    font-style: var(--l365-tile-metric-font-style, var(--l365-type-metric-font-style));
    text-transform: var(--l365-tile-metric-text-transform, var(--l365-type-metric-text-transform));
}