:root {
    --esms-shell-bg: #edf3f8;
    --esms-shell-surface: rgba(255, 255, 255, 0.94);
    --esms-shell-surface-strong: #ffffff;
    --esms-shell-border: rgba(148, 163, 184, 0.22);
    --esms-shell-border-strong: rgba(148, 163, 184, 0.34);
    --esms-shell-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --esms-shell-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.06);
    --esms-shell-header-start: #0e4f88;
    --esms-shell-header-end: #0c6bb4;
    --esms-shell-topnav-start: rgba(255, 255, 255, 0.92);
    --esms-shell-topnav-end: rgba(241, 247, 252, 0.98);
    --esms-shell-title: #13334c;
    --esms-shell-text: #365269;
    --esms-shell-muted: #678198;
    --esms-shell-accent: #0f6db2;
    --esms-shell-accent-soft: rgba(15, 109, 178, 0.12);
    --esms-shell-success: #0d8d73;
    --esms-shell-radius-xl: 24px;
    --esms-shell-radius-lg: 18px;
    --esms-shell-radius-md: 14px;
    --esms-shell-gap: 1.25rem;
    --esms-shell-max: 100%;
}

html.esms-shell-ready {
    scroll-behavior: smooth;
}

body.esms-shell-body {
    background:
        radial-gradient(circle at top left, rgba(110, 180, 255, 0.13), transparent 22rem),
        linear-gradient(180deg, #f8fbfd 0%, var(--esms-shell-bg) 28%, #eef3f7 100%);
    color: var(--esms-shell-text);
}

:root {
    --ui-font-family: "Source Sans 3", "Segoe UI", sans-serif;
    --ui-text-xs: 0.8rem;
    --ui-text-sm: 0.9rem;
    --ui-text-base: 1rem;
    --ui-text-md: 1.05rem;
    --ui-text-lg: 1.2rem;
    --ui-text-xl: clamp(1.55rem, 1.2rem + 1vw, 2.1rem);
    --ui-text-2xl: clamp(1.95rem, 1.45rem + 1.2vw, 2.8rem);
    --ui-line-base: 1.55;
    --ui-line-tight: 1.3;
    --ui-radius-sm: 0.7rem;
    --ui-radius-md: 0.95rem;
    --ui-radius-lg: 1.2rem;
    --ui-space-1: 0.5rem;
    --ui-space-2: 0.75rem;
    --ui-space-3: 1rem;
    --ui-space-4: 1.25rem;
    --ui-space-5: 1.5rem;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f7fafc;
    --ui-surface-muted: #f1f5f9;
    --ui-border: #dbe5ef;
    --ui-border-soft: #e8eef5;
    --ui-text: #24384d;
    --ui-text-strong: #17324a;
    --ui-text-soft: #6b7f93;
    --ui-primary: #1d4ed8;
    --ui-primary-soft: #e7efff;
    --ui-shadow-sm: 0 0.45rem 1rem rgba(15, 23, 42, 0.05);
    --ui-shadow-md: 0 0.75rem 1.65rem rgba(15, 23, 42, 0.06);
    --ui-shadow-lg: 0 1rem 2.2rem rgba(15, 23, 42, 0.08);
}

html {
    font-size: 15px;
}

body {
    font-family: var(--ui-font-family);
    font-size: var(--ui-text-base);
    line-height: var(--ui-line-base);
    color: var(--ui-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p,
li,
td,
th,
label,
.form-text,
.small,
small,
.text-muted,
.dropdown-item,
.nav-link,
.btn,
.form-control,
.form-select,
.breadcrumb-item,
.table,
.card,
.panel,
.soft-card {
    font-size: var(--ui-text-sm);
    line-height: 1.55;
}

h1,
.content-header h1,
.app-content-header h3 {
    font-size: var(--ui-text-2xl);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ui-text-strong);
}

h2,
.card-title,
.panel-title {
    font-size: var(--ui-text-xl);
    line-height: 1.2;
    font-weight: 600;
    color: var(--ui-text-strong);
}

h3,
h4,
.metric-card h4,
.quick-module h4,
.content-card h4 {
    font-size: var(--ui-text-lg);
    line-height: 1.25;
    font-weight: 600;
}

h5,
h6 {
    font-size: var(--ui-text-md);
    line-height: 1.3;
    font-weight: 600;
}

.app-content-header .text-muted,
.panel-kicker,
.profile-menu-role,
.breadcrumb-item,
.table thead th,
.form-text,
.small,
small {
    font-size: var(--ui-text-xs);
}

.table thead th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--ui-text-soft);
}

.table tbody td {
    font-size: var(--ui-text-sm);
    vertical-align: middle;
}

.form-label {
    font-size: var(--ui-text-sm);
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: var(--ui-text);
}




/* GLOBAL GAP REDUCTION OVERRIDES */
body.template-b .esms-shell-wrapper,
body.template-b.esms-density-comfortable .esms-shell-wrapper {
    margin-top: 124px !important; /* Flush with fixed headers */
}
body.template-b .esms-shell-page,
body.template-b.esms-density-comfortable .esms-shell-page {
    padding-top: 0 !important;
}
body.template-b .esms-template-b-utility-shell {
    padding-top: 0.35rem !important;
}