@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    /* Font Settings — UI body: Roboto Flex; brand logo + slogan: always Poppins */
    --main-font: 'Roboto Flex', sans-serif;
    --logo-font: 'Poppins', sans-serif;
    --slogan-font: 'Poppins', sans-serif;
    --slogan-spacing: 0.05em;
    --header-spacing: 0.05em;
    color-scheme: dark;

    /* Theme Colors */
    --bg-color: #0d1117;
    --text-color: #c9d1d9;
    --heading-color: #f0f6fc;
    --link-color: var(--brand-orange);
    --accent-gradient: linear-gradient(to right, var(--brand-orange) 0%, #FF8C00 51%, var(--brand-orange) 100%);

    /* Brand Accents - Deep Vivid Orange (Improved Contrast) */
    --brand-orange: #f57c00;
    --brand-orange-rgb: 245, 124, 0;

    /* Utility Colors */
    --color-success-rgb: 37, 211, 102;
    --color-info-rgb: 0, 150, 255;
    --color-danger-rgb: 233, 30, 99;

    /* Background Setup */
    --main-bg-image: url('/img/mesh_bg.jpg');
    --glow-color-1: rgba(255, 79, 0, 0.1);
    --glow-color-2: rgba(13, 17, 23, 0.8);

    /* Card & UI Elements */
    --card-bg: rgba(22, 27, 34, 0.6);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-blur: blur(12px);
    --panel-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Roboto Flex for app UI */
html {
    color-scheme: dark;
    background-color: #000000;
}

html,
body,
body.dark-theme,
.dark-theme,
.main-content,
.main-content.dark-theme,
.ui-card,
.ui-card :where(h1, h2, h3, h4, h5, h6, p, span, a, button, label, small),
.card-panel,
.card-panel span,
.card-panel h4 {
    font-family: var(--main-font) !important;
}

.font-headline {
    font-family: var(--main-font) !important;
    font-weight: 800;
}

/* Brand lock — SWADS wordmark + slogan always Poppins (beats Roboto Flex rules above) */
.logo-font,
.logo-font *,
.nav-logo-link,
.nav-logo-link h1,
.nav-logo-link span,
.swads-slogan,
.swads-slogan *,
.swads-portal__mark,
.swads-portal__mark span {
    font-family: var(--logo-font) !important;
}

.swads-slogan {
    font-family: var(--slogan-font) !important;
    letter-spacing: var(--slogan-spacing);
}