:root {
    --color-bg: #0f172a; /* slate-900 */
    --color-surface: #1e293b; /* slate-800 */
    --color-border: #334155; /* slate-700 */
    --color-text-primary: #f8fafc; /* slate-50 */
    --color-text-secondary: #94a3b8; /* slate-400 */
    
    --color-eu-mature: #60a5fa; /* blue-400 */
    --color-na-ascending: #2dd4bf; /* teal-400 */
    --color-apac-emerging: #f59e0b; /* amber-500 */
}

body {
    background-color: var(--color-bg);
}

/* Spinner for loading state */
.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 8px solid var(--color-border);
    border-top-color: var(--color-eu-mature);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Map SVG styles */
#map-container svg {
    width: 100%;
    height: 100%;
    stroke-width: 0.5;
    stroke: var(--color-bg);
}

.map-region {
    transition: fill 0.3s ease-in-out, transform 0.2s ease;
    cursor: pointer;
}

.map-region:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

.map-land {
    fill: #475569; /* slate-600 */
}

#region-eu { fill: var(--color-eu-mature); }
#region-na { fill: var(--color-na-ascending); }
#region-apac { fill: var(--color-apac-emerging); }


/* Table Styles */
#regulationsTableBody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease-in-out;
}

#regulationsTableBody tr:hover {
    background-color: rgba(51, 65, 85, 0.5); /* slate-700 with alpha */
}

#regulationsTableBody tr:last-child {
    border-bottom: none;
}

#regulationsTableBody td {
    padding: 1rem;
    vertical-align: top;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}