:root {
    --cc-cream: #fbfbf9;
    --cc-black: #1a1a1a;
    --cc-green: #1a2e26;
    --cc-blue: #4a6b7c;
    --cc-coral: #d96c5b;
    --cc-orange: #c26e47;
    --cc-sand: #d4c3b3;
    --cc-navy: #1f2b38;
}

/* Typography Overrides */
body {
    background-color: var(--cc-cream);
    color: var(--cc-black);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .wp-block-heading {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Button Overrides */
.wp-block-button__link, .wp-element-button {
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}

.wp-block-button__link:hover, .wp-element-button:hover {
    background-color: var(--cc-coral) !important;
    color: var(--cc-cream) !important;
    transform: translateY(-2px);
}

/* Topographic Backgrounds */
.culprit-topo-bg {
    position: relative;
    background-color: var(--cc-cream);
    /* Simple inline SVG pattern for topographic lines */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 Q 30 40 50 10 T 90 10 M20 20 Q 40 50 60 20 T 100 20 M30 30 Q 50 60 70 30 T 110 30 M40 40 Q 60 70 80 40 T 120 40' fill='none' stroke='rgba(26, 46, 38, 0.1)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
}

.culprit-topo-bg-green {
    background-color: var(--cc-green);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 Q 30 40 50 10 T 90 10 M20 20 Q 40 50 60 20 T 100 20 M30 30 Q 50 60 70 30 T 110 30 M40 40 Q 60 70 80 40 T 120 40' fill='none' stroke='rgba(217, 108, 91, 0.3)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 150px 150px;
    color: var(--cc-cream);
}

/* Image styling */
.culprit-image-grid .wp-block-image img {
    border: 4px solid var(--cc-cream);
    box-shadow: 4px 4px 0px var(--cc-black);
    transition: transform 0.3s ease;
}

.culprit-image-grid .wp-block-image img:hover {
    transform: scale(1.02);
}

/* Subtle graphic details */
.cc-badge {
    display: inline-block;
    padding: 5px 10px;
    background: var(--cc-coral);
    color: var(--cc-cream);
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Layout Utilities */
.cc-padded-section {
    padding: 100px 20px;
}