/* CAVALLO Bianco — Custom CSS Extensions */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Hanken+Grotesk:wght@300;400;600&family=Inter:wght@400;500;700&display=swap');

:root {
    --color-background: #FFFCF4;
    --color-on-background: #1a1c17;
    --color-surface: #FFFCF4;
    --color-on-surface: #1a1c17;
    --color-surface-container: #f5f2eb;
    --color-surface-container-low: #ebe8e1;
    --color-surface-container-high: #dfdcd5;
    --color-surface-variant: #e5e3db;
    --color-on-surface-variant: #464741;
    --color-outline-variant: #c7c7bf;
    --color-outline: #7c7d76;
}

html.dark {
    --color-background: #11140e;
    --color-on-background: #e2e4d8;
    --color-surface: #11140e;
    --color-on-surface: #e2e4d8;
    --color-surface-container: #1e2119;
    --color-surface-container-low: #1a1d16;
    --color-surface-container-high: #282b23;
    --color-surface-variant: #33362e;
    --color-on-surface-variant: #c7c7bf;
    --color-outline-variant: #464741;
    --color-outline: #90918a;
}

body {
    background-color: var(--color-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dotted-leader {
    border-bottom: 1px dotted rgba(212, 175, 55, 0.3);
    flex-grow: 1;
    margin: 0 8px 6px;
}

.glass-card {
    background: rgba(17, 20, 14, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Custom Leaflet Map styling */
#map {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #11140e;
    z-index: 1;
}

.leaflet-container {
    background: #11140e !important;
}

/* Smooth opacity cross-fade for visual pane */
#visual-pane-img {
    transition: opacity 0.4s ease-in-out;
}