/* ═══════════════════════════════════════════════════════
    simpleSF2 — light mode
    Loaded only by /simplesf2/, and only when the visitor's system asks for
    light (the <link> carries media="(prefers-color-scheme: light)"), so the
    guides and other pages that share styles.css stay dark.

    The page keeps simpleSF2's gold on warm paper. Gold as text is deepened
    to read on the light ground; the gold buttons keep their bright fill,
    since dark text on bright gold already reads. The header and footer stay
    the site's black, as they do on simpleSPU's cream page.
    ═══════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    --bg:           #f6f3ec;
    --surface:      #fcfaf6;
    --surface-2:    #efebe2;
    --surface-3:    #e6e1d6;
    --border:       rgba(40, 32, 15, 0.1);
    --border-hover: rgba(40, 32, 15, 0.18);
    --border-accent:rgba(150, 110, 30, 0.3);

    --text:         #1f1c17;
    --text-secondary: #4d473e;
    --text-muted:   #625c53;
    --text-dim:     #6f685d;

    --gold:         #85631a;
    --gold-light:   #6b4f12;
    --gold-subtle:  rgba(160, 120, 30, 0.08);
    --gold-glow:    rgba(200, 165, 80, 0.28);

    --green:        #2f7d3c;
    --red-muted:    #a6493b;

    --shadow-sm:    0 1px 2px rgba(40, 30, 10, 0.08);
    --shadow-card:  0 1px 2px rgba(40, 30, 10, 0.06), 0 0 0 1px var(--border);
    --shadow-card-hover: 0 6px 18px -6px rgba(40, 30, 10, 0.18), 0 0 0 1px var(--border-hover);
}

/* Headings that were set straight to white. */
.hero h1,
.section-header h2,
.faq-card h3,
.overview-card h3,
.product-card h3,
.price-amount,
.download-inner h2 {
    color: var(--text);
}

/* The Unlock card: a gold-tinted wash in place of the dark one. */
.price-card-highlight {
    background: linear-gradient(180deg, #f2e8d2 0%, var(--surface) 100%);
}

/* ── Buttons ── */
.button-primary {
    background: linear-gradient(180deg, #ddb966 0%, #c9a04e 100%);
    color: #1a130a;
    border-color: rgba(120, 88, 20, 0.35);
    box-shadow: 0 1px 6px rgba(160, 120, 30, 0.2);
}

.button-primary:hover {
    box-shadow: 0 3px 12px rgba(160, 120, 30, 0.28);
}

.button-ghost {
    background: rgba(40, 32, 15, 0.03);
}

.button-ghost:hover {
    background: rgba(40, 32, 15, 0.06);
}

.button-ghost:active {
    background: rgba(40, 32, 15, 0.04);
}

.linux-vst3-alt {
    text-decoration-color: rgba(98, 92, 83, 0.6);
}

/* ── Depth: the plugin's dark windows sit on paper, so the shadows soften and
   each picks up a faint black edge instead of a white one. ── */
.hero-visual img,
.shot img,
.video-shot iframe {
    box-shadow:
        0 14px 34px -14px rgba(30, 24, 10, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.1);
}

.hero-visual:hover img {
    box-shadow:
        0 20px 44px -16px rgba(30, 24, 10, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.12);
}

.other-downloads-panel {
    box-shadow: 0 12px 28px -10px rgba(30, 24, 10, 0.25);
}

.feature-card:hover,
.product-card:hover {
    box-shadow: 0 6px 18px -8px rgba(30, 24, 10, 0.2);
}