/* ===== Global CSS Variables ===== */

:root {
    --search-bg: #f2f2f2;
    --text-muted: #555;
    --text-color: #000;
    --os-handle: rgba(0,0,0,.35);
    --os-handle-hover: rgba(0,0,0,.55);
    --os-handle-active: rgba(0,0,0,.75);
    
    /* Standardized input/select dimensions */
    --input-height: 44px;
    --input-padding-y: 0.75rem;
    --input-padding-x: 1rem;

    /* Theme Colors - Light Mode */
    --surface-color: #ffffff;
    --border-color: #e0e0e0;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --input-bg: #ffffff;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --close-hover-bg: rgba(0, 0, 0, 0.1);
    
    /* Shared Colors */
    --accent-color: #0078d4;
    --primary-color: #2196f3;
    --primary-hover: #1976d2;
    --danger-color: #f44336;
    --success-color: #4caf50;
    --warning-color: #ff9800;
}

html.dark-mode {
    --search-bg: #2b2b2b;
    --text-muted: #aaa;
    --text-color: #fff;
    --os-handle: rgba(255,255,255,.35);
    --os-handle-hover: rgba(255,255,255,.55);
    --os-handle-active: rgba(255,255,255,.75);
    --input-border: rgba(255,255,255,.14);
    --menu-bg: rgba(22,22,26,.95);
    --focus: #8fb0ff;

    /* Theme Colors - Dark Mode */
    --surface-color: #1e1e1e;
    --border-color: #333333;
    --text-primary: #ffffff;
    --text-secondary: #999999;
    --text-tertiary: #666666;
    --input-bg: #2a2a2a;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --close-hover-bg: rgba(255, 255, 255, 0.1);
}