/*
 * LERWS shared portal typography.
 *
 * This layer is intentionally layout-agnostic. Page styles may keep their
 * component-specific geometry, but type family, scale, weights, leading, and
 * tracking come from one shared set of tokens.
 */

@font-face {
  font-family: Matter;
    src: url("https://lerws.com/assets/fonts/matter/matter-light.woff2") format("woff2"),
         url("https://lerws.com/assets/fonts/matter/matter-light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: Matter;
    src: url("https://lerws.com/assets/fonts/matter/matter-regular.woff2") format("woff2"),
         url("https://lerws.com/assets/fonts/matter/matter-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:where(
    .lerws-portal,
    .lerws-dash,
    .lord-wrap,
    .lerws-projects,
    .lerws-st,
    .lerws-subs,
    .lvs-container,
    .lerws-order-view,
    .lerws-help-center,
    .lerws-requests,
    .lerws-rf,
    .lerws-portal-chat
) {
  --lerws-type-family: Matter, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lerws-portal-font: var(--lerws-type-family);
    --lerws-type-size-body: 14px;
    --lerws-type-size-meta: 12px;
    --lerws-type-size-label: 11px;
    --lerws-type-size-section: 18px;
    --lerws-type-size-page: clamp(28px, 3.2vw, 46px);
    --lerws-type-size-page-compact: clamp(24px, 2.5vw, 36px);
    --lerws-type-size-display: clamp(24px, 2vw, 32px);
    --lerws-type-weight-display: 300;
    --lerws-type-weight-body: 400;
    --lerws-type-weight-ui: 500;
    --lerws-type-weight-strong: 600;
    --lerws-type-leading-body: 1.5;
    --lerws-type-leading-tight: 1.08;
    --lerws-type-leading-section: 1.25;
    --lerws-type-tracking-normal: 0;
    --lerws-type-tracking-tight: -0.035em;
    --lerws-type-tracking-eyebrow: 0.10em;
}

.lerws-portal,
.lerws-dash,
.lord-wrap,
.lerws-projects,
.lerws-st,
.lerws-subs,
.lvs-container,
.lerws-order-view,
.lerws-help-center,
.lerws-requests,
.lerws-rf,
.lerws-portal-chat {
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-body) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: var(--lerws-type-leading-body) !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(
    .lerws-portal,
    .lerws-dash,
    .lord-wrap,
    .lerws-projects,
    .lerws-st,
    .lerws-subs,
    .lvs-container,
    .lerws-order-view,
    .lerws-help-center,
    .lerws-requests,
    .lerws-rf,
    .lerws-portal-chat
) :is(button, input, select, textarea) {
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-body) !important;
    font-weight: var(--lerws-type-weight-ui) !important;
    line-height: var(--lerws-type-leading-body) !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(
    .lerws-portal,
    .lerws-dash,
    .lord-wrap,
    .lerws-projects,
    .lerws-st,
    .lerws-subs,
    .lvs-container,
    .lerws-order-view,
    .lerws-help-center,
    .lerws-requests,
    .lerws-rf
) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--lerws-type-family) !important;
    letter-spacing: var(--lerws-type-tracking-normal);
}

/* Shared page-title treatment. */
:where(
    .lerws-sites-hero h1,
    .lord-title,
    .st-title,
    .ls-title,
    .lerws-help-hero h1,
    .lerws-requests__header h1
) {
    font-size: var(--lerws-type-size-page-compact) !important;
    font-weight: var(--lerws-type-weight-display) !important;
    line-height: var(--lerws-type-leading-tight) !important;
    letter-spacing: var(--lerws-type-tracking-tight) !important;
}

:where(
    .lerws-sites-hero p,
    .lord-subtitle,
    .st-subtitle,
    .ls-subtitle,
    .lerws-help-hero p,
    .lerws-requests__header > p:last-child
) {
    font-size: var(--lerws-type-size-body) !important;
    line-height: var(--lerws-type-leading-body) !important;
}

/* Shared dashboard/admin overview treatment. */
.lerws-portal--admin-overview .lerws-ao {
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-body) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: var(--lerws-type-leading-body) !important;
}

.lerws-portal--admin-overview .lerws-ao__title {
    font-size: var(--lerws-type-size-page) !important;
    font-weight: var(--lerws-type-weight-display) !important;
    line-height: var(--lerws-type-leading-tight) !important;
    letter-spacing: var(--lerws-type-tracking-tight) !important;
}

.lerws-portal--admin-overview .lerws-ao__section-title {
    font-size: var(--lerws-type-size-section) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: var(--lerws-type-leading-section) !important;
}

.lerws-portal--admin-overview :is(.lerws-ao__eyebrow, .lerws-ao__section-kicker) {
    font-size: var(--lerws-type-size-label) !important;
    font-weight: var(--lerws-type-weight-ui) !important;
    letter-spacing: var(--lerws-type-tracking-eyebrow) !important;
}

.lerws-portal--admin-overview .lerws-ao__kpi-value {
    font-size: var(--lerws-type-size-display) !important;
    font-weight: var(--lerws-type-weight-display) !important;
    line-height: var(--lerws-type-leading-tight) !important;
}

/* -------------------------------------------------------------------------
 * Shared page contract
 *
 * These selectors cover the current portal roots in addition to the older
 * roots above. They keep the type scale and page-level geometry aligned while
 * leaving intentionally narrow forms, article columns, and modal widths
 * untouched.
 */
:where(
    .lerws-portal,
    .lerws-ac--modern,
    .lerws-work-overview,
    .lerws-portal-hub,
    .lerws-admin-page,
    .lerws-admin-hub,
    .lerws-billing,
    .lerws-projects,
    .lerws-leads-shell,
    .lerws-help-center,
    .lerws-requests,
    .lerws-rf,
    .lord-wrap
) {
    font-family: var(--lerws-type-family) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: var(--lerws-type-leading-body) !important;
    color: var(--lerws-portal-text);
}

:where(
    .lerws-ac--modern,
    .lerws-work-overview,
    .lerws-portal-hub,
    .lerws-admin-hub,
    .lerws-billing
) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--lerws-type-family) !important;
}

:where(
    .lerws-ac--modern .lerws-ac__hero h1,
    .lerws-work-overview__hero h1,
    .lerws-portal-hub__header h1,
    .lerws-admin-hub__hero h1,
    .lerws-billing__header h1
) {
    font-size: var(--lerws-type-size-page-compact) !important;
    font-weight: var(--lerws-type-weight-display) !important;
    line-height: var(--lerws-type-leading-tight) !important;
    letter-spacing: var(--lerws-type-tracking-tight) !important;
}

:where(
    .lerws-ac--modern .lerws-ac__section-head h2,
    .lerws-work-overview__section-head h2,
    .lerws-portal-hub__header h2,
    .lerws-admin-hub__group-head h2,
    .lerws-admin-hub__attention h2,
    .lerws-billing__panel h2,
    .lerws-billing__tools h2
) {
    font-size: var(--lerws-type-size-section) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: var(--lerws-type-leading-section) !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(
    .lerws-ac--modern,
    .lerws-work-overview,
    .lerws-portal-hub,
    .lerws-admin-page,
    .lerws-billing,
    .lerws-projects,
    .lerws-leads-shell,
    .lerws-help-center,
    .lerws-requests,
    .lerws-rf,
    .lord-wrap
) :is(button, input, select, textarea) {
    font-family: var(--lerws-type-family) !important;
    font-weight: var(--lerws-type-weight-ui) !important;
}

/* Shared shell controls.
 *
 * The administrator dashboard stylesheet also targets the global header and
 * raises several controls to 44px. Those are portal-shell components, not
 * dashboard components, so keep their geometry and UI type consistent on
 * every page. The !important flags are intentional: this layer must win over
 * page-specific shell overrides while leaving page content styles scoped to
 * their own roots.
 */
:where(.lerws-portal) .lerws-quick-create-trigger {
    min-height: 36px !important;
    height: 36px !important;
    gap: 7px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-family: var(--lerws-type-family) !important;
    font-size: 12px !important;
    font-weight: var(--lerws-type-weight-ui) !important;
    line-height: 1 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(.lerws-portal) .lerws-topbar-search {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
}

:where(.lerws-portal) .lerws-topbar-search-input {
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-body) !important;
    font-weight: var(--lerws-type-weight-body) !important;
    line-height: 1 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(.lerws-portal) .lerws-topbar-right .lerws-admin-trigger {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-meta) !important;
    font-weight: var(--lerws-type-weight-ui) !important;
    line-height: 1 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(.lerws-portal) .lerws-topbar-icon-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 6px !important;
}

:where(.lerws-portal) .lerws-topbar-help {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-family: var(--lerws-type-family) !important;
    font-size: var(--lerws-type-size-meta) !important;
    font-weight: var(--lerws-type-weight-ui) !important;
    line-height: 1 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
}

:where(.lerws-portal) .lerws-profile-trigger {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
}

/* Use one named font face and one weight contract for the visible shell. An
   ID-qualified selector prevents a page stylesheet from changing the
   dashboard header/sidebar through a higher-specificity rule. */
#lerws-portal.lerws-portal--admin-overview {
  font-family: Matter, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#lerws-portal .lerws-quick-create-trigger,
#lerws-portal .lerws-quick-create-trigger span {
  font-family: Matter, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
    font-synthesis: none !important;
}

#lerws-portal .lerws-sidebar-item,
#lerws-portal .lerws-sidebar-item-label {
  font-family: Matter, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: var(--lerws-type-tracking-normal) !important;
    font-synthesis: none !important;
}

@media (max-width: 720px) {
    :where(.lerws-portal) .lerws-quick-create-trigger {
        width: 36px !important;
        padding: 0 !important;
    }

    :where(.lerws-portal) .lerws-topbar-icon-btn,
    :where(.lerws-portal) .lerws-topbar-help,
    :where(.lerws-portal) .lerws-profile-trigger {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    :where(.lerws-portal) .lerws-topbar-help {
        padding: 0 !important;
    }
}

/* The chat widget is appended outside the portal shell, so it consumes the
   root theme variables as fallbacks while retaining the same type scale. */
.lerws-portal-chat {
    font-family: var(--lerws-type-family, Matter, sans-serif);
    font-size: var(--lerws-type-size-body, 14px);
    line-height: var(--lerws-type-leading-body, 1.5);
}
