:root {
	--color-blue-350: #80bdff;
	--shadow-blue-focus: rgba(0, 123, 255, .25);
	--color-divider-transparent: #0000001c;
	--color-hover-transparent: rgb(0 0 0 / 5%);
	--button-size: 36px;
	--color-base-white: #fff;
	--color-white-fixed: #fff;
	--color-blue-550: #007bff;
	--controls-width: 450px;
	--controls-max-width: 400px;
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--header-height: 60px;
	--color-gray-250: #ddd;
	--color-gray-350: #ced4da;
	--breakpoint: 800px;

	/* Color System */
	--color-gray-50: #fdfdfe;
	--color-gray-100: #f0f0f0;
	--color-gray-300: #cbd5e0;
	--color-gray-400: #a0aec0;
	--color-gray-500: #718096;
	--color-gray-600: #4a5568;
	--color-gray-800: #2d3748;
	--color-dark-overlay: #333;

	--color-blue-400: #4299e1;
	--color-blue-500: #3182ce;
	--color-blue-600: #3b82f6; 
	--color-blue-700: #2563eb;

	--color-red-400: #ef4444;
	--color-red-500: #dc2626;

	--color-green-400: #10b981;
	--color-green-500: #059669;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);

	--color-focus-ring: rgba(66, 153, 225, 0.2);
	--color-focus-ring-strong: rgba(66, 153, 225, 0.3);
	--color-focus-ring-light: rgba(66, 153, 225, 0.15);

	/* Extended Palette for Controls */
	--color-gray-450: #9ca3af;
	--color-gray-700: #495057;
	--color-secondary: #6c757d;
	--color-secondary-dark: #5a6268;
	
	--color-blue-300: #63b3ed;
	--color-blue-info: #17a2b8;

	--color-green-success: #28a745;
	--color-green-450: #48bb78;
	--color-green-600: #38a169;
	--color-green-700: #2d8b57;

	--color-red-danger: #dc3545;
	--color-red-danger-dark: #c82333;
	--color-red-custom: #e43c36;
	
	--color-overlay-dark: rgba(0, 0, 0, 0.6);
	--color-overlay-medium: rgba(0, 0, 0, 0.5);
	--color-overlay-light: rgba(255, 255, 255, 0.3);

	--color-tooltip-yellow: #ffcc33;
	--color-black: #000;

	/* Controls Specific Variables */
	--tab-color: var(--color-dark-overlay);
	--li-thumb-color: var(--color-blue-350);
	--li-color: var(--color-base-white);
	--li-selected-color: var(--color-gray-450);
	--li-border-color: var(--color-gray-700);
	--li-action-zoom-color: var(--color-blue-info);
	--li-action-copy-color: var(--color-green-success);
	--li-action-delete-color: var(--color-red-danger);
	--li-action-visibility-color: #8a63e5;

	--li-action-visibility-color: #8a63e5;

	--text-area-color: var(--color-gray-800);
}

/* Dark Mode Map Filter - Fiord Color Style */
[data-theme="dark"] .osm-layer {
	filter: invert(1) sepia(0.5) hue-rotate(195deg) brightness(0.85) contrast(1.1) saturate(0.6) grayscale(0.2) !important;
}

[data-theme="dark"] {
	--color-base-white: #1e1e1e;
	--color-gray-50: #252526;
	--color-gray-100: #2d2d2d;
	--color-gray-250: #333333;
	--color-gray-300: #3e3e42;
	--color-gray-350: #4a4a4f;
	--color-gray-400: #6e6e73;
	--color-gray-500: #858585;
	--color-gray-600: #cccccc;
	--color-gray-800: #f0f0f0;
	
	--color-dark-overlay: rgba(0, 0, 0, 0.8);
	--color-overlay-light: rgba(255, 255, 255, 0.1);

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);

	/* Controls Overrides */
	--tab-color: #252526; /* Less transparent, more solid dark */
	--li-thumb-color: var(--color-blue-500);
	--li-color: #e0e0e0;
	--li-border-color: #444;
	--li-selected-color: #444;
	
	/* Tweak blues for dark mode (saturate/lighten slightly for visibility if needed) */
	--color-blue-400: #63b3ed;
	--color-blue-500: #4299e1;

	/* Overrides for generic UI elements */
	--color-divider-transparent: rgba(255, 255, 255, 0.2);
	--color-hover-transparent: rgba(255, 255, 255, 0.2);
}