:root {
    /* ── Brand colors (HSL system for main.css) ── */
    --base-h: 125;
    --base-s: 63%;
    --base-l: 41%;
    --base-two-h: 117;
    --base-two-s: 69%;
    --base-two-l: 35%;
    --base-three-h: 117;
    --base-three-s: 59%;
    --base-three-l: 55%;

    /* ── Custom.css variables ── */
    --bg-main:      #0e1117;
    --bg-card:      #161b22;
    --bg-hover:     hsl(215, 21%, 15%);
    --primary:      #26aa31;
    --primary-hover:hsl(125, 63%, 31%);
    --primary-glow: rgba(38,170,49,0.35);
    --text-main:    #ffffff;
    --text-soft:    rgba(255,255,255,0.65);
    --border-soft:  rgba(255,255,255,0.07);

    /* ── Text color system (main.css uses --white for all text) ── */
    --white:         0 0% 100%;
    --heading-color: hsl(0 0% 100%);
    --body-color:    hsl(0 0% 100%);

    /* ── Body/section backgrounds (used throughout main.css) ── */
    --body-bg:        220 24% 7%;
    --section-bg:     215 21% 11%;
    --section-bg-two: 215 11% 7%;
    --border-color:   219 26% 15%;

    /* ── Primary/Secondary system (main.css --primary and --secondary) ── */
    --primary-h:   125;
    --primary-s:   63%;
    --primary-l:   41%;
    --secondary-h: 215;
    --secondary-s: 1%;
    --secondary-l: 11%;

    /* ── Gradients (footer shape + choose cards) ── */
    --shape-one: linear-gradient(180deg,
        rgba(38,170,49,0) 0%,
        rgba(38,170,49,0.15) 100%);
    --choose-bg: linear-gradient(90deg,
        rgba(38,170,49,0.08) 0%,
        rgba(38,170,49,0.06) 47.11%,
        rgba(38,170,49,0.04) 100%);

    /* ── Shape & Typography ── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;
    --body-font:    'Inter', sans-serif;
    --transition:   0.25s cubic-bezier(.4,.0,.2,1);
}

body {
    background: linear-gradient(180deg, #0e1117 0%, #161b22 100%);
    font-family: var(--body-font) !important;
}

/* Sidebar override */
.sidebar, .side-nav, [class*="sidebar"] {
    background: #0d1117 !important;
}