/* Configure the supplied Foundry theme from canonical LETO Brand V2 tokens.
   html:root keeps this mapping authoritative when layout styles load later. */
html:root {
    --primary-color: var(--surfaceCanvas);
    --secondary-color: var(--surfaceSubtle);
    --text-color: var(--textPrimary);
    --text-muted: var(--textSecondary);
    --card-bg: var(--surfaceRaised);
    --card-border: var(--borderSubtle);
    --surface-accent: var(--surfaceSubtle);
    --border-subtle: var(--borderSubtle);
    --hover-light: var(--selectedSurface);

    --dark-bg: var(--surfaceCanvas);
    --dark-bg-secondary: var(--surfaceSubtle);
    --dark-text: var(--textPrimary);
    --dark-text-muted: var(--textSecondary);
    --dark-card-bg: var(--surfaceRaised);
    --dark-card-bg-hover: var(--surfaceSubtle);
    --dark-border: var(--borderSubtle);
    --dark-surface-accent: var(--surfaceSubtle);
}

html body {
    font-family: var(--fontFamilyInterface);
}
/* Bootstrap is the shared control surface used by Foundry authentication and layouts. */
html:root {
    --bs-body-font-family: var(--fontFamilyInterface);
    --bs-body-color: var(--textPrimary);
    --bs-body-bg: var(--surfaceCanvas);
    --bs-emphasis-color: var(--textPrimary);
    --bs-secondary-color: var(--textSecondary);
    --bs-secondary-bg: var(--surfaceSubtle);
    --bs-tertiary-color: var(--textSecondary);
    --bs-tertiary-bg: var(--surfaceSubtle);
    --bs-heading-color: var(--textPrimary);
    --bs-border-color: var(--borderSubtle);
    --bs-border-radius: var(--radiusControl);
    --bs-border-radius-lg: var(--radiusCard);
    --bs-primary: var(--brandPrimary);
    --bs-link-color: var(--linkText);
    --bs-link-hover-color: var(--brandStrong);
    --bs-success: var(--successText);
    --bs-success-text-emphasis: var(--successText);
    --bs-success-bg-subtle: var(--successSurface);
    --bs-success-border-subtle: var(--successText);
    --bs-warning: var(--warningText);
    --bs-warning-text-emphasis: var(--warningText);
    --bs-warning-bg-subtle: var(--warningSurface);
    --bs-warning-border-subtle: var(--warningText);
    --bs-danger: var(--criticalText);
    --bs-danger-text-emphasis: var(--criticalText);
    --bs-danger-bg-subtle: var(--criticalSurface);
    --bs-danger-border-subtle: var(--criticalText);
    --bs-info: var(--informationText);
    --bs-info-text-emphasis: var(--informationText);
    --bs-info-bg-subtle: var(--informationSurface);
    --bs-info-border-subtle: var(--informationText);
    --bs-form-valid-color: var(--successText);
    --bs-form-valid-border-color: var(--successText);
    --bs-form-invalid-color: var(--criticalText);
    --bs-form-invalid-border-color: var(--criticalText);
}

html:root .btn-primary {
    --bs-btn-color: var(--textOnBrand);
    --bs-btn-bg: var(--brandPrimary);
    --bs-btn-border-color: var(--brandPrimary);
    --bs-btn-hover-color: var(--textOnBrand);
    --bs-btn-hover-bg: var(--brandStrong);
    --bs-btn-hover-border-color: var(--brandStrong);
    --bs-btn-active-color: var(--textOnBrand);
    --bs-btn-active-bg: var(--brandStrong);
    --bs-btn-active-border-color: var(--brandStrong);
    --bs-btn-disabled-color: var(--disabledText);
    --bs-btn-disabled-bg: var(--disabledSurface);
    --bs-btn-disabled-border-color: var(--borderSubtle);
}

:where(html:root) a:where(:not(.btn)) {
    color: var(--linkText);
}

:where(html:root) a:where(:not(.btn):hover) {
    color: var(--brandStrong);
}

html:root :is(.form-control, .form-select) {
    color: var(--textPrimary);
    background-color: var(--surfaceRaised);
    border-color: var(--borderControl);
}

html:root .form-floating {
    --bs-body-bg: var(--surfaceRaised);
}

html:root .form-check-input {
    border-color: var(--borderControl);
    background-color: var(--surfaceRaised);
}

html:root .form-check-input:checked {
    background-color: var(--brandPrimary);
    border-color: var(--brandPrimary);
}

:where(html:root) :focus-visible {
    outline: 2px solid var(--focusRing);
    outline-offset: 2px;
}
html:root :is(.form-control, .form-select, .form-check-input):focus,
html:root :is(.btn, a):focus-visible {
    outline: 2px solid var(--focusRing);
    outline-offset: 2px;
    box-shadow: none;
}

/* Keep the supplied authentication layout and forms; configure their presentation. */
html:root .auth-shell {
    background-color: var(--surfaceCanvas);
    background-image: none;
}

html:root .auth-shell-overlay {
    background: radial-gradient(ellipse at 15% 15%, var(--brandSoft), transparent 65%),
                radial-gradient(ellipse at 90% 85%, var(--surfaceSubtle), transparent 60%);
}

html:root .auth-card {
    --bs-card-bg: var(--surfaceRaised);
    --bs-card-color: var(--textPrimary);
    border-radius: var(--radiusCard);
    backdrop-filter: none;
}

/* Bootstrap colour utilities declare !important; bind those supplied utilities to semantic text tokens. */
html:root :is(.link-primary, .text-primary) {
    color: var(--linkText) !important;
    text-decoration-color: var(--linkText) !important;
}

html:root .link-primary:is(:hover, :focus) {
    color: var(--brandStrong) !important;
    text-decoration-color: var(--brandStrong) !important;
}

html:root[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--brandSoft);
    border-color: var(--brandPrimary);
}

html:root {
    --bs-light-text-emphasis: var(--textPrimary);
    --bs-light-bg-subtle: var(--surfaceSubtle);
    --bs-light-border-subtle: var(--borderSubtle);
    --bs-secondary-text-emphasis: var(--textSecondary);
    --bs-secondary-bg-subtle: var(--surfaceSubtle);
    --bs-secondary-border-subtle: var(--borderSubtle);
}

html:root .btn-outline-primary {
    --bs-btn-color: var(--brandPrimary);
    --bs-btn-border-color: var(--brandPrimary);
}

html:root .btn-outline-secondary {
    --bs-btn-color: var(--textSecondary);
    --bs-btn-border-color: var(--borderControl);
}

html:root .btn-outline-danger {
    --bs-btn-color: var(--criticalText);
    --bs-btn-border-color: var(--criticalText);
}

html:root :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger) {
    --bs-btn-hover-color: var(--surfaceRaised);
    --bs-btn-hover-bg: var(--bs-btn-color);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: var(--surfaceRaised);
    --bs-btn-active-bg: var(--bs-btn-color);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-btn-disabled-color: var(--disabledText);
    --bs-btn-disabled-bg: var(--disabledSurface);
    --bs-btn-disabled-border-color: var(--borderSubtle);
}

html:root .btn-danger {
    --bs-btn-color: var(--criticalSurface);
    --bs-btn-bg: var(--criticalText);
    --bs-btn-border-color: var(--criticalText);
    --bs-btn-hover-color: var(--criticalText);
    --bs-btn-hover-bg: var(--criticalSurface);
    --bs-btn-hover-border-color: var(--criticalText);
    --bs-btn-active-color: var(--criticalText);
    --bs-btn-active-bg: var(--criticalSurface);
    --bs-btn-active-border-color: var(--criticalText);
    --bs-btn-disabled-color: var(--disabledText);
    --bs-btn-disabled-bg: var(--disabledSurface);
    --bs-btn-disabled-border-color: var(--borderSubtle);
}

/* Supplied account avatars and role/subscription badges use Bootstrap utilities. */
html:root :is(.bg-primary, .text-bg-primary) {
    background-color: var(--brandPrimary) !important;
    color: var(--textOnBrand) !important;
}

/* The native container keeps its header/footer spacing; workspace pages own mobile gutters. */
@media (max-width: 767px) {
    html:root .container-integrated:has(.staff-workspace) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}