/*
 * Hello Theme — CMS Variable Mapping
 * Maps auto-generated color.css + fonts.css variables to theme variables.
 * Load order: color.css → fonts.css → style.css → colors-override.css (LAST)
 *
 * color.css  generates: --primary-color, --default-color, --bg-primary, --bg-secondary,
 *                        --text-primary, --text-secondary, --text-on-primary, --text-on-secondary,
 *                        --logo-width, --logo-height-full, --logo-color, --logo-filter,
 *                        --header-bg, --footer-bg
 * fonts.css  generates: --font-primary, --font-secondary, --font-size-base, --line-height-base
 */

:root {
    /* ── Brand colors from CMS ── */
    --accent: var(--primary-color, #6366f1);
    --accent-hover: var(--default-color, #818cf8);
    --accent-soft: rgba(99,102,241,0.1);
    --accent-glow: rgba(99,102,241,0.15);
    --border-accent: rgba(99,102,241,0.3);

    /* ── Global colors from CMS ── */
    --text: var(--text-color, #1e293b);
    --text-secondary: var(--text-light, #64748b);
    --surface: var(--bg-color, #ffffff);
    --surface-alt: var(--bg-alt, #f8fafc);

    /* ── Typography from CMS ── */
    --font-sans: var(--font-secondary, system-ui, -apple-system, 'Segoe UI', sans-serif);
    --font-heading: var(--font-primary, var(--font-sans));
}

/* ── Base typography from CMS ── */
body {
    font-size: var(--font-size-base, 16px);
    line-height: var(--line-height-base, 1.6);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
}

/* ── Logo sizing from CMS ── */
.nav-brand.has-logo .nav-brand-icon,
.footer-brand.has-logo .footer-brand-icon {
    width: var(--logo-width, 120px);
    max-width: var(--logo-width, 120px);
    height: var(--logo-height-full, auto);
}
:where(.nav-brand.has-logo .nav-brand-icon) svg,
:where(.nav-brand.has-logo .nav-brand-icon) img,
:where(.footer-brand.has-logo .footer-brand-icon) svg,
:where(.footer-brand.has-logo .footer-brand-icon) img {
    color: var(--logo-color, inherit);
    filter: var(--logo-filter, none);
    height: var(--logo-height-full, auto);
    max-height: var(--logo-height-full, 40px);
    object-fit: contain;
}


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