:root {
    /* Improved color palette with better contrast */
    --background: #e8ecf1;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-hover: #eff1f4;
    --border: #dde2e8;
    --border-light: #e8eaed;
    
    /* Text colors */
    --text-primary: #1a1d23;
    --text-secondary: #5f6368;
    --text-tertiary: #80868b;
    
    /* Accent colors */
    --accent: #4CAF50;
    --accent-light: #6fbf73;
    --accent-dark: #3d8b40;

    /* Line marker section colors — fixed semantic palette, chorus follows accent */
    --line-color-verse:  rgba(196, 104, 120, 0.38);
    --line-color-chorus: #c46878;
    --line-color-bridge: rgba(196, 104, 120, 0.38);
    --line-color-extra1: rgba(196, 104, 120, 0.38);
    --line-color-extra2: rgba(196, 104, 120, 0.38);
    
    /* Shadows - softer and more subtle */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --nav-height: 55px;
    --small-sidebar-width: 60px;
    --main-sidebar-width: 300px;
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: "DM Mono", monospace;
    --chord-font: "DM Mono", monospace;
    --font-size-songs: 18px;

    /* Settings Panel - Dynamic Variables */
    --line-height-songs: 1.5;
    --chord-weight: 500;
    --lyrics-weight: 300;
    --chord-distance: -4px;
}

/* Dark mode variables */
body.dark-mode {
    --background: #0e0e0e;
    --surface: #1c1c1c;
    --surface-elevated: #262626;
    --surface-hover: #242424;
    --border: #3a3a3a;
    --border-light: #454545;
    
    /* Text colors */
    --text-primary: #ececec;
    --text-secondary: #a1a1a1;
    --text-tertiary: #737373;
    
    /* Accent colors - use same variables as light mode, just adjust lighter/darker shades */
    /* --accent is already set globally and will be inherited */
    --accent-light: color-mix(in srgb, var(--accent) 70%, white);
    --accent-dark: color-mix(in srgb, var(--accent) 85%, black);
    
    /* Shadows - neutral and subtle */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 3px 8px 0 rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 6px 16px 0 rgba(0, 0, 0, 0.7);
}