/**
 * C Sharp Recording Studio — brand tokens (olive + lime from logo)
 */
:root {
    /* Pups-inspired temporary studio palette */
    --cs-bg: #fefefe;
    --cs-bg-soft: #fcfcfc;
    --cs-bg-muted: #f8f8f8;
    --cs-text: #23281b;
    --cs-muted: #5e6652;
    --cs-line: #efefef;
    /* Light section surfaces — near-white, minimal green cast */
    --cs-section-gradient: linear-gradient(180deg, #ffffff 0%, #fdfdfd 50%, #fafafa 100%);
    --cs-section-gradient-short: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
    /* Subtle decorative washes on light sections (low opacity) */
    --cs-wash-lime: rgba(var(--cs-rgb-lime), 0.04);
    --cs-wash-olive: rgba(var(--cs-rgb-olive), 0.03);
    --cs-lime: #b9d64a;
    --cs-lime-soft: #d6e890;
    --cs-olive: #708a38;
    --cs-olive-dark: #435624;
    /* Aliases used across hero / components */
    --cs-cyan: var(--cs-lime);
    --cs-purple: var(--cs-olive);
    /* For rgba(..., alpha) in hero + UI */
    --cs-rgb-lime: 185, 214, 74;
    --cs-rgb-olive: 112, 138, 56;
    /* Shared layout rhythm */
    --cs-section-padding-y: clamp(48px, 7vw, 72px);
    --cs-section-title-size: clamp(1.75rem, 4.2vw, 2.65rem);
    --cs-section-title-line: 1.12;
    /* Voice / spectrum texture for primary buttons (EQ bars + soft wave line) */
    --cs-btn-sound-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='48' viewBox='0 0 200 48'%3E%3Cg fill='%23fff' opacity='.1'%3E%3Crect x='2' y='30' width='3' height='14' rx='1.5'/%3E%3Crect x='18' y='22' width='3' height='22' rx='1.5'/%3E%3Crect x='34' y='26' width='3' height='18' rx='1.5'/%3E%3Crect x='50' y='14' width='3' height='30' rx='1.5'/%3E%3Crect x='66' y='24' width='3' height='20' rx='1.5'/%3E%3Crect x='82' y='18' width='3' height='26' rx='1.5'/%3E%3Crect x='98' y='28' width='3' height='16' rx='1.5'/%3E%3Crect x='114' y='20' width='3' height='24' rx='1.5'/%3E%3Crect x='130' y='26' width='3' height='18' rx='1.5'/%3E%3Crect x='146' y='12' width='3' height='32' rx='1.5'/%3E%3Crect x='162' y='24' width='3' height='20' rx='1.5'/%3E%3Crect x='178' y='28' width='3' height='16' rx='1.5'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23fff' stroke-width='0.85' opacity='.09' d='M0 36c22-11 42 9 64 0s42-9 64 0 40 9 60 0'/%3E%3C/svg%3E");
}

/* Base body text — display headings use Syne in page stylesheets */
html,
body {
    font-family: 'Inter', system-ui, sans-serif;
}

p, span, a, li, label,
button, input, select, textarea {
    font-family: inherit;
}

/* Multi-layer (texture + gradient) on header button */
@keyframes csVoiceWaveDrift {
    0% { background-position: 0 50%, 0 0; }
    100% { background-position: -200px 50%, 0 0; }
}

/* Single texture layer on hero CTA fill */
@keyframes csVoiceWaveDriftTex {
    0% { background-position: 0 50%; }
    100% { background-position: -200px 50%; }
}

@keyframes csBtnSoundShimmer {
    0%, 100% { background-position: -80% 0; opacity: 0.18; }
    45% { background-position: 180% 0; opacity: 0.34; }
}

/* Shared active state for page nav links */
.cs-nav a.is-active {
    color: var(--cs-olive-dark);
    background: rgba(var(--cs-rgb-lime), 0.28);
    box-shadow: 0 0 0 1px rgba(var(--cs-rgb-olive), 0.18) inset;
}

.cs-mobile-menu a.is-active {
    color: var(--cs-olive-dark);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}