:root {
    /* Early Winter Morning palette */
    --C1: #4C493E;
    --C2: #C5C7B6;
    --C3: #C5C7B6;
    --C4: #4C493E;
    --C5: rgba(34, 32, 40, 0.9);
    --C_LightText: #FFF8D3;

    --text-color: #C5C7B6;
    --bg-color: #2F3837;
    --primary-accent: #C5C7B6;
    --title-color: #FFF8D3;
    --border-color: #4C493E;
    --input-bg: #222028;
    --input-border: #4C493E;
    --button-text-color: #FFF8D3;
    --control-bg: rgba(34, 32, 40, 0.9);
}

body {
    background-color: #2F3837;
    color: #C5C7B6;
}

#sketch-holder {
    position: relative;
}

#control-holder {
    background-color: rgba(47, 56, 55, 0.95);
    border-top: 1px solid #4C493E;
}

.control-section div {
    color: #C5C7B6;
}

/* Range slider overrides for dark theme */
input[type="range"] {
    background: #4C493E !important;
}

input[type="range"]::-webkit-slider-thumb {
    background: #C5C7B6 !important;
}

input[type="range"]::-moz-range-thumb {
    background: #C5C7B6 !important;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(197, 199, 182, 0.3);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(197, 199, 182, 0.3);
}

/* Text content */
.animation-content {
    color: #C5C7B6;
}

.animation-content h1 {
    color: #FFF8D3;
}

.animation-content a {
    color: #FFF8D3;
}

/* Back nav */
.back-nav a {
    color: #C5C7B6;
}