:root { --theme-primary: #0b3d91; --theme-secondary: #0057b8; --theme-accent: #00aeef; --theme-background: #f8fafc; --theme-surface: #92d3ae; --theme-card: #ffffff; --theme-text-primary: #0f172a; --theme-text-secondary: #475569; --theme-border: #e2e8f0; --theme-sidebar-background: #0f172a; --theme-sidebar-text: #ffffff; --theme-sidebar-hover: #0057b8; --theme-success: #16a34a; --theme-warning: #ca8a04; --theme-danger: #dc2626; --theme-info: #0284c7; --theme-container-wide: 1440px; --theme-section-spacing-sm: 2rem; --theme-section-spacing-md: 4rem; --theme-section-spacing-lg: 6rem; --theme-radius-sm: 4px; --theme-radius-md: 8px; --theme-radius-lg: 16px; --theme-btn-primary-bg: #0B3D91; --theme-btn-primary-text: #FFFFFF; --btn-primary-bg: #0B3D91; --btn-primary-text: #FFFFFF; --btn-primary-radius: 8px; --btn-primary-padding: 0.75rem 1.5rem; --button-radius: 8px; --button-padding: 0.75rem 1.5rem; --btn-secondary-bg: #0057B8; --btn-secondary-text: #FFFFFF; --btn-outline-border: #0B3D91; --btn-outline-text: #0B3D91; --btn-font-family: 'Manrope', sans-serif; --btn-font-weight: 600; --btn-font-size: 1rem; --theme-card-radius: 12px; --card-radius: 12px; --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.12); --card-hover-transform: translateY(-6px); --card-image-ratio: 16 / 9; --card-padding: 1.5rem; --cm-card-radius: 8px; --theme-form-input-height: 48px; --form-height: 48px; --form-border-style: solid; --form-radius: 8px; --form-success-color: #28a745; --form-error-color: #dc3545; --form-field-gap: 1rem; --form-label-gap: 0.5rem; --form-input-font-size: 1rem; --form-label-font-size: 0.875rem; --form-label-font-weight: 500; --form-border-color: #e2e8f0; --form-focus-color: #0b3d91; --form-placeholder-color: #475569; --form-transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; --theme-bg: #f8fafc; --theme-text: #0f172a; --theme-dark: #0f172a; --theme-light: #f8fafc; --theme-heading-font: 'Manrope', sans-serif; --theme-body-font: 'Inter', sans-serif; --theme-heading-size: 2.5rem; --theme-body-size: 1rem; --theme-line-height: 1.6; --font-heading: 'Manrope', sans-serif; --font-body: 'Inter', sans-serif; --font-navigation: 'Manrope', sans-serif; --h1-size: 2.5rem; --h2-size: 2rem; --h3-size: 1.5rem; --body-size: 1rem; --line-height: 1.6; --heading-weight: 700; --font-size-h1: 2.5rem; --font-size-h2: 2rem; --font-size-h3: 1.5rem; --font-size-body: 1rem; --font-weight-heading: 700; --font-weight-body: 400; --font-weight-strong: 600; --font-weight-nav: 600; --font-weight-button: 600; --line-height-h1: 1.2; --line-height-h2: 1.3; --line-height-h3: 1.4; --line-height-body: 1.6; --letter-spacing-normal: normal; --cm-font-ui: 'Inter', sans-serif; --cm-font-display: 'Manrope', sans-serif; --admin-font: 'Manrope', sans-serif; --container-width: 1200px; --container-wide-width: 1440px; --wide-container-width: 1440px; --container-padding-x: 24px; --header-height: 80px; --section-small: 2rem; --section-medium: 4rem; --section-large: 6rem; --spacing-section-small: 2rem; --spacing-section-medium: 4rem; --spacing-section-large: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-small: 4px; --radius-medium: 8px; --radius-large: 16px; --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08); --site-header-height: 80px; --admin-topbar-height: 80px; --cm-header-height: 80px; --cm-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); --theme-container-width: 1200px; --theme-header-height: 80px; --cm-animation-duration: 0.4s; --cm-animation-easing: cubic-bezier(0.22, 1, 0.36, 1); --animation-style: fade; --animation-duration-fast: 0.2s; --animation-duration-normal: 0.4s; --animation-duration-slow: 0.6s; --animation-easing: ease; --animation-reveal-offset: 20px; --back-to-top-offset: 24px; --hero-theme-heading-color: #ffffff; --hero-theme-body-color: #e5e7eb; --hero-theme-button-bg: #2563eb; --hero-theme-button-color: #ffffff; --hero-height: 100vh; --hero-height-mobile: 90vh; --hero-min-height: 100vh; --hero-title-size: clamp(2rem, 5vw, 4.5rem); --hero-subtitle-size: clamp(1rem, 2vw, 1.5rem); --hero-spacing: 1.25rem; --hero-button-padding: 18px 40px; --hero-overlay-opacity: 25; --hero-heading-size-base: 3rem; --hero-subtitle-size-base: 1.125rem; --hero-content-size-base: 1rem; --hero-heading-weight: 700; --hero-heading-line-height: 1.15; --hero-subtitle-weight: 400; --hero-content-max-width: 480px; --hero-heading-color: #ffffff; --hero-paragraph-color: #e5e7eb; --hero-button-color: #ffffff; --hero-button-bg: #2563eb; --hero-overlay: rgba(0,0,0,0.25); --hero-background-color: #0b2a4a; --hero-background-gradient: linear-gradient(135deg, #0b2a4a 0%, #2563eb 100%); --hero-image-position: center; --hero-image-size: cover; --footer-background: #6a51c2; --footer-text: #ffffff; --footer-bg: #6a51c2; --footer-text-muted: rgba(255, 255, 255, 0.72); --footer-link-hover: #ffffff; --footer-border: rgba(255, 255, 255, 0.12); --footer-padding-y: 4rem; --footer-bg-theme: #6a51c2; --footer-text-theme: #ffffff; --hero-background: linear-gradient(135deg, #0b2a4a 0%, #2563eb 100%); }

/**
 * Theme Manager runtime connections.
 * Variables are injected via /theme.css — do not hardcode design tokens here.
 */

/* ── Typography ── */
body,
.cm-engineering-ui {
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--line-height);
    color: var(--theme-text-primary);
    background-color: var(--theme-background);
}

h1,
.display-brand,
.hero-title {
    font-family: var(--font-heading);
    font-size: var(--h1-size);
    font-weight: var(--heading-weight);
    line-height: var(--line-height-h1);
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    font-weight: var(--heading-weight);
    line-height: var(--line-height-h2);
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--h3-size);
    font-weight: var(--heading-weight);
    line-height: var(--line-height-h3);
}

h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--heading-weight);
}

.site-nav,
.site-nav .nav-link,
.site-header,
.navbar,
.navbar-nav {
    font-family: var(--font-navigation);
}

/* ── Layout ── */
.container:not(.container-fluid) {
    max-width: var(--container-width);
}

.container-wide {
    max-width: var(--wide-container-width);
}

/* ── Header ── */
.site-header,
.site-nav,
.header,
.admin-topbar,
.portal-topbar {
    min-height: var(--header-height);
}

.theme-menu-centered .site-nav__menu {
    justify-content: center;
}

.theme-logo-center .site-header__inner {
    justify-content: center;
}

/* ── Footer ── */
.site-footer,
footer.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}

/* ── Buttons ── */
.btn-primary,
.btn-cta,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-steel {
    border-radius: var(--button-radius);
}

.btn-primary,
.btn-cta,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-steel {
    padding: var(--button-padding);
}

/* ── Cards ── */
.card,
.cm-card,
.stat-card,
.portal-card {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.card:hover,
.cm-card:hover,
.stat-card:hover,
.portal-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: var(--card-hover-transform);
}

/* ── Forms ── */
input.form-control,
textarea.form-control,
select.form-select {
    min-height: var(--form-height);
    border-radius: var(--form-radius);
}

/* ── Hero ── */
.hero-section,
.cms-hero,
.hero-theme-preview {
    min-height: var(--hero-height);
    background: var(--hero-background);
}

.hero-section.hero-has-overlay::before,
.cms-hero.hero-has-overlay::before {
    background: var(--hero-overlay);
}

/* ── Animations ── */
.cm-animations-disabled .cm-reveal,
.cm-animations-disabled .animate-fade,
.cm-animations-disabled [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.cm-animations-disabled .cm-page-loader {
    display: none !important;
}

.cm-back-to-top-enabled .cm-back-to-top {
    display: flex;
}

.cm-back-to-top {
    bottom: var(--back-to-top-offset);
}