:root {
    /* Light theme (default) */
    --color-bg: #f5f5f7;
    --color-bg-secondary: #ffffff;
    --color-text: #1a1a1a;
    --color-text-secondary: #6b7280;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-accent: #2563eb;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --space-4xl: 72px;
    --space-lg: 24px;
    --font-family-nav: 'OffBit-Dot', monospace;
    /* Desktop-friendly adaptiveness */
    --sidebar-width: clamp(280px, 28vw, 420px);
    --panel-tab-width: clamp(56px, 6vw, 72px);
    /* Flexible font sizes */
    --font-size-base: clamp(14px, 1.1vw, 16px);
    --font-size-button: clamp(12px, 1vw, 14px);
    --font-size-panel-tab: clamp(20px, 2.2vw, 32px);
    --font-size-branch: clamp(19px, 1.5vw, 21px); /* Updated: title should be 21px */
    --font-size-branch-sub: clamp(17px, 1.3vw, 19px); /* Updated: author/info should be 19px */
    --font-size-overlay: clamp(16px, 1.2vw, 18px);
    --font-size-hcw-title: clamp(40px, 8vw, 85px);
    /* Smooth transitions */
    --transition-duration: 0.3s;
    
    /* ===== Focus Management ===== */
    --focus-outline: 2px solid var(--color-accent);
    --focus-outline-offset: 2px;
}

/* Dark theme */
[data-theme="dark"] {
    --color-bg: hsl(220 15% 8%);
    --color-bg-secondary: hsl(220 15% 12%);
    --color-text: #ffffff;
    --color-text-secondary: #a1a1aa;
    --color-text-muted: #a1a1aa;
    --color-border: hsl(220 15% 16%);
    --color-accent: #60a5fa;
    --color-primary: #60a5fa;
    --color-primary-dark: #3b82f6;
}

/* Dark theme scrollbar styling */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 6px;
    border: 2px solid var(--color-bg);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--color-bg);
}

/* Firefox scrollbar styling for dark theme */
[data-theme="dark"] {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) var(--color-bg);
}