:root {
    /*
        ==================================================
        THEME TOKENS — LIGHT THEME (DEFAULT)
        Core visual system for surfaces, borders, text, and shadows.
        ==================================================
    */
    /* Base backgrounds */
    --bg-main: #edf2f7; /* Primary app background */
    --bg-main-light: #edf2f7; /* Contant light app background */
    --bg-shell: #e9eff6; /* Outer shell / frame background */
    --content-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 34%), var(--bg-main); /* Main scroll/content background treatment */
    /* Surface backgrounds */
    --bg-panel: rgba(255, 255, 255, 0.92); /* Cards / panels */
    --bg-header: var(--bg-sidebar); /* Top header bar */
    --bg-sidebar: rgba(255, 255, 255, 0.78); /* Sidebar / mobile menu shell */
    /* Interactive states */
    --bg-hover: #edf3fa; /* Hover state fill */
    --bg-active: #e2ebf7; /* Active / selected state fill */
    /* Borders */
    --border-main: rgba(166, 180, 199, 0.26); /* Default subtle border */
    --border-strong: rgba(145, 161, 183, 0.38); /* Stronger border for active/emphasis states */
    /* Text colors */
    --text-main: #243447; /* Default body text */
    --text-strong: #1d2b3a; /* Headings / emphasized text */
    --text-muted: #55677d; /* Secondary UI text */
    --text-soft: #6f8198; /* Softer supporting text */
    --text-dim: #8797ab; /* Low-emphasis metadata */
    --text-on-accent: #1d2b3a; /* Text placed on accent-style backgrounds */
    /* Shadows */
    --shadow-panel: 0 1px 2px rgba(25, 35, 52, 0.03), 0 12px 36px rgba(25, 35, 52, 0.05); /* Panel/card elevation */
    --shadow-sidebar: 0 1px 2px rgba(25, 35, 52, 0.03), 0 14px 40px rgba(25, 35, 52, 0.06); /* Sidebar elevation */
    --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.55); /* Header edge highlight */
    /*
        ==================================================
        TYPOGRAPHY
        Shared type system used across the shell and widgets.
        ==================================================
    */

    --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs: 13px; /* Fine metadata / utility text */
    --text-sm: 14px; /* Default compact UI text */
    --text-md: 15px; /* Secondary headings / body emphasis */
    --text-lg: 20px; /* Primary section/page headings */

    --font-weight-semibold: 600; /* Buttons / labels */
    --font-weight-header: 650; /* Headers needing extra emphasis */
    --font-weight-bold: 700; /* Brand / strong emphasis */

    --line-height-base: 1.55; /* Default readable line spacing */
    --letter-spacing-tight: 0.1px; /* Tight heading tracking */
    --letter-spacing-brand: 0.2px; /* Slight spacing for logo/brand text */
    /*
        ==================================================
        SPACING SCALE
        Reusable spacing tokens for padding, gaps, and layout rhythm.
        ==================================================
    */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 22px;
    --space-7: 28px;
    /*
        ==================================================
        RADII
        Corner rounding system.
        ==================================================
    */

    --radius-sm: 12px; /* Buttons / smaller controls */
    --radius-md: 18px; /* Panels / larger surfaces */
    --radius-round: 999px; /* Pills / circles / toggles */
    /*
        ==================================================
        APP LAYOUT
        Shell-level sizing and spacing.
        ==================================================
    */

    --page-pad: 28px; /* Main content padding */
    --panel-pad: 20px; /* Inner panel/card padding */
    --panel-min-height: 140px; /* Baseline panel height */
    --grid-gap: 18px; /* Content grid gap */

    --sidebar-width: 260px; /* Expanded sidebar width */
    --sidebar-width-collapsed: 220px; /* Reserved collapsed width token */
    --sidebar-pad: 22px; /* Sidebar vertical padding */
    --sidebar-pad-x: 16px; /* Sidebar horizontal padding */
    --sidebar-gap: 22px; /* Vertical spacing between sidebar sections */

    --header-height: 68px; /* Top header height */

    --nav-pad-y: 12px; /* Nav button vertical padding */
    --nav-pad-x: 14px; /* Nav button horizontal padding */
    /*
        ==================================================
        MOBILE MENU
        Controls the closed/opened mobile nav footprint.
        ==================================================
    */

    --mobile-menu-height: 78px; /* Total menu body height */
    --mobile-menu-peek: 36px; /* Visible top strip when menu is closed */
    --mobile-menu-toggle-size: 64px; /* Circular toggle button size */
    --mobile-menu-toggle-overhang: 24px; /* Amount the toggle protrudes above the menu */
    --mobile-menu-footprint: calc(var(--mobile-menu-peek) + var(--mobile-menu-toggle-overhang)); /* Total vertical footprint affecting layout */
    --mobile-menu-open-height: calc(var(--mobile-menu-toggle-overhang) + var(--space-4) + 42px + var(--space-4)); /* Total height when mobile menu is fully open (toggle overhang + padding + nav height) */
    /*
        ==================================================
        EFFECTS / MOTION
        Blur and transition timing tokens.
        ==================================================
    */

    --blur-sm: 10px; /* Panel blur */
    --blur-lg: 16px; /* Sidebar blur */
    --blur-xl: 18px; /* Header blur */

    --duration-fast: 0.16s; /* Small hover/press transitions */
    --duration-base: 0.2s; /* Standard UI transitions */
    --duration-toggle: 0.24s; /* Theme toggle motion */
    /*
        ==================================================
        THEME TOGGLE
        Sizing and thumb positioning for the light/dark switch.
        ==================================================
    */

    --toggle-width: 64px; /* Toggle track width */
    --toggle-height: 34px; /* Toggle track height */
    --toggle-pad-x: 8px; /* Horizontal inset for icons */
    --toggle-icon-box: 18px; /* Icon container size */
    --toggle-icon-size: 16px; /* Icon SVG size */
    --toggle-thumb-size: 26px; /* Moving thumb diameter */
    --toggle-thumb-left: 4px; /* Thumb position in light mode */
    --toggle-thumb-left-dark: 32px; /* Thumb position in dark mode */
    --toggle-thumb-shadow: 0 3px 10px rgba(15, 23, 42, 0.18); /* Thumb elevation */
    /*
        ==================================================
        CHART TOKENS — LIGHT THEME
        Keeps chart styling centralized in CSS so JS can
        read the active theme values.
        ==================================================
    */

    --chart-height-short: clamp(240px, 32vh, 340px);
    --chart-height-default: clamp(320px, 46vh, 495px);
    --chart-height-tall: clamp(400px, 58vh, 680px);
    --chart-paper-bg: rgba(0,0,0,0);
    --chart-plot-bg: rgba(0,0,0,0);
    --chart-font-family: var(--font-family-base);
    --chart-font-color: #2a3f5f;
    --chart-font-size: 14px;
    --chart-axis-color: #2a3f5f;
    --chart-axis-title-size: 15px;
    --chart-grid-color: #EBF0F8;
    --chart-line-color: #EBF0F8;
    --chart-zero-line-color: #EBF0F8;
    --chart-legend-font-family: var(--font-family-base);
    --chart-legend-font-color: #2a3f5f;
    --chart-legend-font-size: 14px;
    --chart-line-width: 2px;
    --chart-hover-bg: rgba(255, 255, 255, 0.96);
    --chart-hover-border: var(--border-strong);
    --chart-hover-font-color: var(--text-main);
    --chart-spike-color: var(--chart-font-color);

    --chart-series-1: #1f77b4;
    --chart-series-2: #ff9f1c;
    --chart-series-3: #00a64f;
    --chart-series-4: #e63946;
    --chart-series-5: #9467bd;
    --chart-series-6: #8c564b;
}

html[data-theme="dark"] {
    /*
        ==================================================
        THEME TOKENS — DARK THEME OVERRIDES
        Only values that change between themes live here.
        Keeps the token system easy to compare against :root.
        ==================================================
    */
    /* Base backgrounds */
    --bg-main: #0e0e10; /* Primary app background */
    --bg-shell: #0e0e10; /* Outer shell / frame background */
    --content-bg: var(--bg-main); /* Flat dark content background */
    /* Surface backgrounds */
    --bg-panel: #161618; /* Cards / panels */
    --bg-header: var(--bg-sidebar); /* Top header bar */
    --bg-sidebar: #151517; /* Sidebar / mobile menu shell */
    /* Interactive states */
    --bg-hover: #1f1f22; /* Hover state fill */
    --bg-active: #2a2a2e; /* Active / selected state fill */
    /* Borders */
    --border-main: #26262b; /* Default subtle border */
    --border-strong: #323238; /* Stronger border for active/emphasis states */
    /* Text colors */
    --text-main: #e6e6e8; /* Default body text */
    --text-strong: #ffffff; /* Headings / emphasized text */
    --text-muted: #b4b4b8; /* Secondary UI text */
    --text-soft: #9a9aa0; /* Softer supporting text */
    --text-dim: #7e7e85; /* Low-emphasis metadata */
    --text-on-accent: #ffffff; /* Text placed on accent-style backgrounds */
    /* Shadows */
    --shadow-panel: none; /* Flat dark panels */
    --shadow-sidebar: none; /* Flat dark sidebar */
    --shadow-header: none; /* Flat dark header */
    /*
        ==================================================
        CHART TOKENS — DARK THEME
        ==================================================
    */

    --chart-paper-bg: rgba(0,0,0,0);
    --chart-plot-bg: rgba(0,0,0,0);
    --chart-font-color: var(--text-muted);
    --chart-axis-color: var(--text-muted);
    --chart-grid-color: var(--border-strong);
    --chart-line-color: var(--border-strong);
    --chart-zero-line-color: var(--border-strong);
    --chart-legend-font-color: var(--text-muted);
    --chart-hover-bg: rgba(22, 22, 22, 0.96);
    --chart-hover-border: var(--border-strong);
    --chart-hover-font-color: var(--text-main);
}




/*
    ==================================================
    PORTRAIT ORIENTATION - MOBILE THEME VARIABLES
    Only values that change between portrait/mobile layout.
    ==================================================
*/

@media (orientation: portrait) {

    :root {
        --chart-height-short: clamp(220px, 30vh, 300px);
        --chart-height-default: clamp(260px, 40vh, 400px);
        --chart-height-tall: clamp(320px, 50vh, 520px);
    }
}