/* ---------------------------------------------------------
 * Shared design system for the shirt-generator flow (Design/Preview page, order-confirmed page).
 * Linked via <link rel="stylesheet"> from every page in the flow so the underlying design
 * tokens, header treatment, caption/label style, and button/slider look can only drift by
 * editing this one file — not by two pages' inline <style> blocks independently redefining the
 * same rules. Stripe's own hosted Checkout page is a third-party page and is not (and cannot
 * be) styled here.
 *
 * Visual language: off-white background, black ink, pill-shaped controls with a black
 * border/fill, small-caps-style muted labels. This governs UI chrome only — the Memphis neon
 * palette and Wave gradient presets (the generative art itself) are untouched by any of this.
 * --------------------------------------------------------- */

:root {
    --font-mono: "IBM Plex Mono", "JetBrains Mono", "Courier New", monospace;
    --color-bg: #f6f5f2;
    --color-panel: #ffffff;
    --color-border: #e2e0da;
    --color-border-strong: #cccccc;
    --color-text: #141414;
    --color-text-muted: #78766f;
    /* The one interactive/ink color: pill borders at rest, pill fill when active/selected,
       spinners, notice accents — everywhere a highlight color is needed. Used to be pink
       (#ff2e88); now black, so every one of those spots repaints itself from this one value. */
    --color-accent: #141414;
    /* Corner rounding for every button across the flow (style toggles, tabs, action buttons,
       etc.). Buttons used to be full pills (999px); this is the one value to change to retune
       all of them at once. */
    --radius-btn: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-mono);
    background: var(--color-bg);
    color: var(--color-text);
}

button, input, select, textarea {
    font-family: inherit;
    color: inherit;
}

/* ---------- Page header ---------- */
.page-header {
    padding: 20px 20px 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.page-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.page-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--color-text);
}

.title-bold {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* A lighter, muted secondary title span — for a page that wants to pair the bold brand name
   with a smaller descriptive suffix (e.g. order-confirmed's "90s shirt"). */
.title-light {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--color-text-muted);
}

/* ---------- Small-caps caption/field-label text ----------
   Uppercase + wide letter-spacing + small size + a light weight + muted color, reading like
   small caps without relying on font-variant (this monospace stack has no small-caps glyphs).
   Used for every plain field label (Shirt Color, Size, Surface, ...) across the whole flow. */
.group-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-text-muted);
    margin: 0;
}

/* Section header variant: bold + full-strength text color (a step up from a plain field
   label), with a thin rule filling the rest of the row. */
.section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-weight: 700;
}

.section-label::after {
    content: "";
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    background: var(--color-border-strong);
}

/* Small muted descriptive text under a section — a step below a plain field label, never
   competing with the content above it. */
.footnote {
    margin: 6px 0 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--color-text-muted);
}

/* ---------- Buttons ----------
   The one button look used everywhere in the flow: a pill with a black border at rest, and a
   solid black fill for the active/selected (or primary-action) state. */
.option-btn {
    padding: 7px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius-btn);
    background: var(--color-panel);
    color: var(--color-text);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.option-btn:hover {
    background: #efeeea;
}

.option-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

/* ---------- Range sliders ----------
   A thin pill track, filled black from the start up to the handle, with a plain circular
   handle. The "filled" portion is painted via the input's own background (a two-stop
   gradient driven by the --range-progress custom property that core.js's updateRangeFill()
   keeps in sync with the current value) rather than a native browser feature — once
   -webkit-appearance/appearance is set to none to allow restyling at all, there's no browser-
   native concept of a "filled" track left to build on. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--color-accent) 0%,
        var(--color-accent) var(--range-progress, 0%),
        var(--color-border-strong) var(--range-progress, 0%),
        var(--color-border-strong) 100%
    );
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    height: 3px;
    border-radius: 999px;
    background: transparent;
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: none;
    cursor: pointer;
}

/* ---------- Text inputs & selects ----------
   Minimal and bordered, no drop shadow — a pill would make free text hard to read against, so
   these keep a soft rounded rectangle instead of a full pill. */
input[type="text"],
input[type="email"],
input[type="tel"],
select {
    padding: 7px 10px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 8px;
    background: var(--color-panel);
    font-size: 0.8rem;
    width: 100%;
    box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent);
}