/* Design System CSS - Extracted from index.html */

:root {
    --color-white: #ffffff;
    /* Theme variables - default to Mauve */
    --color-dark-900: #1C1917;
    --color-dark-800: #292524;
    --color-dark-750: #252220; /* Lighter grey for center panel - very subtle theme tint */
    --color-dark-700: #44403C;
}

* {
    letter-spacing: -0.01em;
}

h1, h2, h3 {
    font-family: 'Instrument Serif', serif;
    font-variation-settings: "wdth" 112.5;
    letter-spacing: -0.025em;
    font-weight: 500;
}

body {
    background-color: var(--color-dark-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease;
}

/* Subtle borders using color-mix */
.border-subtle {
    border-color: color-mix(in oklab, white 10%, transparent);
}

.bg-subtle {
    background-color: color-mix(in oklab, white 5%, transparent);
}

.bg-subtle-hover:hover {
    background-color: color-mix(in oklab, white 10%, transparent);
}

/* Theme-aware dark backgrounds */
.bg-dark-900 {
    background-color: var(--color-dark-900) !important;
    transition: background-color 0.3s ease;
}

.bg-dark-800 {
    background-color: var(--color-dark-800) !important;
    transition: background-color 0.3s ease;
}

.bg-dark-750 {
    background-color: var(--color-dark-750) !important;
    transition: background-color 0.3s ease;
}

.bg-dark-700 {
    background-color: var(--color-dark-700) !important;
    transition: background-color 0.3s ease;
}

/* Right panel slide animation */
#right-panel {
    transform: translateX(100%);
    position: relative;
    transition: transform 0.3s ease-in-out;
}

#right-panel.open {
    transform: translateX(0);
}

/* Plotly chart clickable cursor */
.js-plotly-plot .plotly {
    cursor: pointer !important;
}

.js-plotly-plot .plotly .modebar {
    cursor: default;
}