:root {
    color-scheme: light dark;
    --bg-gradient: linear-gradient(135deg, light-dark(#667eea, #1a1a2e) 0%, light-dark(#764ba2, #16213e) 100%);

    --text-color: light-dark(#1a1a1a, #e0e0e0);
    --text-light: light-dark(#fafafa, #e0e0e0);
    --card-bg: light-dark(#fafafa, #2d2d44);
    --card-shadow: light-dark(0 4px 6px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.3));
    --border-color: light-dark(#ddd, #444);
    --primary-color: light-dark(#667eea, #8b9dc3);
    --input-bg: light-dark(#fafafa, #3a3a54);
    --label-color: light-dark(#555, #c0c0c0);
    --table-border: light-dark(#e0e0e0, #444);
    --table-hover: light-dark(#f5f5f5, #404060);

    /* Tooltip variables */
    --tooltip-bg: light-dark(#ffffff, #1f2937);
    --tooltip-text: light-dark(#374151, #f3f4f6);
    --tooltip-border: light-dark(#e5e7eb, #374151);
    --tooltip-title: light-dark(#1f2937, #f9fafb);
    --tooltip-label: light-dark(#6b7280, #9ca3af);
    --tooltip-value: light-dark(#111827, #f3f4f6);
    --tooltip-divider: light-dark(#e5e7eb, #374151);
    --tooltip-divider-light: light-dark(#f3f4f6, #374151);
    --tooltip-footer: light-dark(#9ca3af, #6b7280);
    --primary-color-light: light-dark(#dbeafe, #1e3a8a);
    --badge-bg: light-dark(#f3f4f6, #374151);
    --badge-text: light-dark(#4b5563, #d1d5db);

    /* Footer & Link colors */
    --text-secondary: light-dark(#6b7280, #9ca3af);
    --link-color: light-dark(#667eea, #8b9dc3);
    --link-hover: light-dark(#764ba2, #a5b4fc);
}