/* Main stylesheet for font settings */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');

/* Apply LXGW font to all Chinese text throughout all pages */
/* Modern browsers will automatically use LXGW for Chinese characters and Lexend for Latin */
/* The font stack cascades from body to all child elements */
body {
    font-family: "Lexend", "LXGW WenKai TC", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #FFFFFC;
}

/* Apply LXGW font to Chinese text in header labels */
.header-label {
    font-family: "Lexend", "LXGW WenKai TC", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Apply LXGW font to specific Chinese text elements and classes */
.chinese-char,
.cantonese-text,
[class*="cantonese"],
[class*="chinese"],
[lang="zh"],
[lang="zh-HK"],
[lang="zh-TW"] {
    font-family: "LXGW WenKai TC", "Lexend", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Apply to common text elements - ensures Chinese characters use LXGW */
p, span, div, a, button, label, li, td, th, h1, h2, h3, h4, h5, h6 {
    font-family: "Lexend", "LXGW WenKai TC", -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Global background colors for all pages */
body {
    background: #FFFFFC;
}

@property --hue {
    syntax: '<number>';
    inherits: false;
    initial-value: 150;
}

header,
.header,
.exercise-selector,
.fixed-nav {
    background: linear-gradient(180deg, 
    hsl(var(--hue), 55%, 88%)  0%, 
        hsl(var(--hue), 10%, 95%) 96%, 
        #fff 100%
    ) !important;
    animation: hueRotate 960s linear infinite;
border: 0; !important;
}

@keyframes hueRotate {
    0% {
        --hue: 150;
    }
    100% {
        --hue: 510;
    }
}


main {
    background: #FFFFFC !important;
}

/* Override for "with Cantonese" in header to use Princess Sofia font - must be after general span rule */
.header-title-container .header-title span.italic,
.header-title span.italic,
.header-title .italic,
body .header-title-container .header-title .italic,
.header-title .italic .header-char,
.header-title span.italic .header-char,
.header-title-container .header-title .italic .header-char,
body .header-title-container .header-title .italic .header-char {
    font-family: "Princess Sofia", cursive !important;
    font-weight: 500 !important;
    font-style: normal !important;
}