/* ============================================================================
   Forge - industrial. Square corners, condensed uppercase headings, heavy
   rules, amber against graphite. Suits workshops, gear, parts and gyms.

   Dark-first, so :root is the dark palette and light is the override.
   ========================================================================== */

:root {
    --wx-color-scheme: dark;

    --wx-ground: #121212;
    --wx-ground-deep: #0A0A0A;
    --wx-surface: #1B1B1D;
    --wx-surface-2: #242427;
    --wx-line: #35353A;
    --wx-line-soft: #2A2A2E;

    --wx-ink: #F2F0ED;
    --wx-muted: #9B9892;
    --wx-muted-dim: #6B6863;

    --wx-signal: #F5A524;
    --wx-signal-ink: #171003;
    --wx-signal-soft: rgba(245, 165, 36, 0.14);

    --wx-coin: #FFC53D;
    --wx-coin-ink: #101010;
    --wx-coin-soft: rgba(255, 197, 61, 0.13);
    --wx-good: #46A758;
    --wx-warn: #FFC53D;
    --wx-bad: #E5484D;

    /* Nothing here is rounded. The shape is the point. */
    --wx-radius: 0px;
    --wx-pad: 18px;
    --wx-shell: 1320px;

    --wx-shadow: none;
    /* Depth: a bar above the page, and a sheet or toast floating over it. */
    --wx-elev-1: 0 1px 2px rgba(0, 0, 0, 0.12);
    --wx-elev-2: 0 12px 32px rgba(0, 0, 0, 0.28);

    /* Chips and thumbnails; buttons and steppers; the fully rounded chip. */
    --wx-radius-sm: 0px;
    --wx-radius-control: 0px;
    --wx-radius-pill: 0px;

    /* Text over a picture, the wash that keeps it readable, and the Patron tier. */
    --wx-on-image: #ffffff;
    --wx-scrim: rgba(0, 0, 0, 0.55);
    --wx-patron: #8b5cf6;
    --wx-patron-soft: rgba(139, 92, 246, 0.16);

    --wx-font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
    --wx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wx-font-data: "Roboto Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --wx-color-scheme: light;

        --wx-ground: #EFEDE9;
        --wx-ground-deep: #E2DFDA;
        --wx-surface: #FFFFFF;
        --wx-surface-2: #F5F3EF;
        --wx-line: #CFCBC4;
        --wx-line-soft: #E0DCD5;

        --wx-ink: #17150F;
        --wx-muted: #56524A;
        --wx-muted-dim: #837E74;

        --wx-signal: #B86E00;
        --wx-signal-ink: #FFFFFF;
        --wx-signal-soft: rgba(184, 110, 0, 0.12);

        --wx-coin: #9A6A00;
        --wx-coin-ink: #ffffff;
        --wx-good: #2C6E3F;
    }
}

:root[data-theme="light"] {
    --wx-color-scheme: light;

    --wx-ground: #EFEDE9;
    --wx-ground-deep: #E2DFDA;
    --wx-surface: #FFFFFF;
    --wx-surface-2: #F5F3EF;
    --wx-line: #CFCBC4;
    --wx-line-soft: #E0DCD5;

    --wx-ink: #17150F;
    --wx-muted: #56524A;
    --wx-muted-dim: #837E74;

    --wx-signal: #B86E00;
    --wx-signal-ink: #FFFFFF;
    --wx-signal-soft: rgba(184, 110, 0, 0.12);

    --wx-coin: #9A6A00;
    --wx-coin-ink: #ffffff;
    --wx-good: #2C6E3F;
}

/* ---- personality ------------------------------------------------------- */

h1, h2, h3, h4, h5,
.product-details-section .product-name,
.product-grid .name {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

header.site-header,
header.chrome-top {
    border-bottom-width: 3px;
    border-bottom-color: var(--wx-signal);
}

header nav ul li a {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
}

/* Buttons are never restyled by a theme: sentence case, the body face (Frank,
   2026-09-29). A theme speaks through its tokens and its headings. */

/* Stamped, not printed - the header block sits hard against the grid. */
.display-header {
    background-color: var(--wx-ground-deep);
    border-left: 4px solid var(--wx-signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.product-grid .product-card {
    border-width: 2px;
}

.product-grid .product-card:hover {
    border-color: var(--wx-signal);
}

main {
    border: 1px solid var(--wx-line);
}

.subtotal-amount,
.cart-item-pricing {
    font-family: var(--wx-font-data);
    font-variant-numeric: tabular-nums;
}

/* ---- home bands -------------------------------------------------------- */

.wx-band-head {
    background-color: var(--wx-ground-deep);
    border-left: 4px solid var(--wx-signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wx-band-head h2 {
    font-family: var(--wx-font-display);
    font-weight: 600;
    letter-spacing: inherit;
}

.wx-hero-name,
.wx-pin-in h2,
.wx-gcard-in h3,
.wx-tile-in h3 {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* Nothing in this theme is rounded, the hero included. */
.wx-hero { border-radius: 0; }