/*
 * SCG Homepage Theme Components — Design Tokens
 *
 * This is the ONE file to edit to change colors, typography, spacing,
 * radius, or shadow sitewide for the SCG Home Page template. Every rule
 * in homepage.css reads these custom properties — it never hardcodes a
 * color, font stack, or pixel value itself. Change a value here and it
 * propagates everywhere that token is used, with no other file touched.
 *
 * Both light and dark themes are defined. `prefers-color-scheme` follows
 * the visitor's OS setting; `[data-theme]` lets a theme switcher (if the
 * host theme has one) override it explicitly in either direction.
 */

:root {
    /* --- color: light (default) --- */
    --scg-bg: #F7F3EC;
    --scg-bg-alt: #EEE4D3;
    --scg-bg-deep: #E4D5BC;
    --scg-ink: #1B140D;
    --scg-ink-soft: #6B5642;
    --scg-ink-faint: #9C8770;
    --scg-rust: #E1601A;
    --scg-rust-deep: #A83F0E;
    --scg-rust-tint: #FBD8C2;
    --scg-verify: #3F6B52;
    --scg-verify-tint: #DCEBE2;
    --scg-border: rgba(27, 20, 13, .14);
    --scg-card: #FFFFFF;
    --scg-shadow: 0 1px 2px rgba(27, 20, 13, .06), 0 8px 24px -12px rgba(27, 20, 13, .18);

    /* --- layout --- */
    --scg-radius: 3px;
    --scg-radius-round: 50%;
    --scg-max-width: 1180px;
    --scg-gap: 24px;
    --scg-section-padding: 88px 24px;

    /* --- typography --- */
    --scg-font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
    --scg-font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    --scg-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

    /* --- buttons --- */
    --scg-btn-padding: 12px 24px;
    --scg-btn-font-size: .76rem;
    --scg-btn-letter-spacing: .06em;

    /*
     * --- header (fixed brand treatment) ---
     * Deliberately constant across light/dark mode and [data-theme]
     * overrides below (never redeclared in those blocks) — a fixed dark
     * "premium" brand tone matching the canyon hero photo, not a
     * light/dark-adaptive surface like --scg-bg.
     */
    --scg-header-bg: #2B1E16;
    --scg-header-ink: #FFFFFF;
    --scg-header-border: rgba(255, 255, 255, .14);
}

@media (prefers-color-scheme: dark) {
    :root {
        --scg-bg: #17120D;
        --scg-bg-alt: #1E170F;
        --scg-bg-deep: #241B12;
        --scg-ink: #F3EAD9;
        --scg-ink-soft: #C9B79E;
        --scg-ink-faint: #8E7A62;
        --scg-rust: #F0793B;
        --scg-rust-deep: #FF9257;
        --scg-rust-tint: #3A2416;
        --scg-verify: #6FAE8C;
        --scg-verify-tint: #1E2E26;
        --scg-border: rgba(255, 255, 255, .14);
        --scg-card: #221A12;
        --scg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    }
}

:root[data-theme="dark"] {
    --scg-bg: #17120D;
    --scg-bg-alt: #1E170F;
    --scg-bg-deep: #241B12;
    --scg-ink: #F3EAD9;
    --scg-ink-soft: #C9B79E;
    --scg-ink-faint: #8E7A62;
    --scg-rust: #F0793B;
    --scg-rust-deep: #FF9257;
    --scg-rust-tint: #3A2416;
    --scg-verify: #6FAE8C;
    --scg-verify-tint: #1E2E26;
    --scg-border: rgba(255, 255, 255, .14);
    --scg-card: #221A12;
    --scg-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
    --scg-bg: #F7F3EC;
    --scg-bg-alt: #EEE4D3;
    --scg-bg-deep: #E4D5BC;
    --scg-ink: #1B140D;
    --scg-ink-soft: #6B5642;
    --scg-ink-faint: #9C8770;
    --scg-rust: #E1601A;
    --scg-rust-deep: #A83F0E;
    --scg-rust-tint: #FBD8C2;
    --scg-verify: #3F6B52;
    --scg-verify-tint: #DCEBE2;
    --scg-border: rgba(27, 20, 13, .14);
    --scg-card: #FFFFFF;
    --scg-shadow: 0 1px 2px rgba(27, 20, 13, .06), 0 8px 24px -12px rgba(27, 20, 13, .18);
}