/* --accent-color and --accent-rgb are replaced at runtime from the page's app config. */
:root {
    --accent-color: #1a73e8;
    --accent-rgb: 26, 115, 232;
    --page-bg: #f4f6f8;
    --card-bg: #fff;
    --surface-input: #fff;
    --surface-modal: #fff;
    --border-input: #ccc;
    --text-primary: #333;
    --text-secondary: #444;
    --text-muted: #666;
    --slider-track: #d1d5db;
    --footer-border: #e5e7eb;
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.1);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.18);
    --shadow-toggle-knob: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-slider-thumb: 0 2px 4px rgba(0, 0, 0, 0.2);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    /* The Options menu; literal values, so .dark-mode redefines each one. */
    --menu-bg: #fff;
    --menu-border: #d1d5db;
    --menu-border-open: #9ca3af;
    --menu-hover: #e5e7eb;
    --menu-well: #e5e7eb;
    --menu-segment: #fff;
    --menu-segment-text: #333;
    --menu-muted: #666;
    --menu-track-off: #cfd4dc;
    --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.dark-mode {
    --page-bg: #0f1115;
    --card-bg: #181a1f;
    --surface-input: #0f1115;
    --surface-modal: #1f2937;
    --border-input: #2a2f3a;
    --text-primary: #e5e7eb;
    --text-secondary: #cbd5e1;
    --text-muted: #9ca3af;
    --slider-track: #4a5568;
    --footer-border: #374151;
    --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.6);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    --menu-bg: #1f2126;
    --menu-border: #36383c;
    --menu-border-open: #4a4d55;
    --menu-hover: #2a2f3a;
    --menu-well: #0f1115;
    --menu-segment: #2a2f3a;
    --menu-segment-text: #fff;
    --menu-muted: #8a8e95;
    --menu-track-off: #3b3e45;
    --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.45);
}