/* Brand layer. Reads the BAMLN theme tokens; fallbacks are palette A2 so the
   builder looks right under any theme. Scope: colors and backgrounds, font family/weight/stretch, border widths/colors
   and corner radii. No font-size, line-height, margin, padding or layout changes,
   so the reflow rules stay in charge. */
.bam-site,
.bam-v1 {
    --bam-b-paper: var(--bam-paper, #ecefe3);
    --bam-b-surface: var(--bam-surface, #ffffff);
    --bam-b-ink: var(--bam-ink, #10231a);
    --bam-b-ink-2: var(--bam-ink-2, #44534a);
    --bam-b-line: var(--bam-line, #cdd6c2);
    --bam-b-accent: var(--bam-accent, #17502f);
    --bam-b-accent-soft: var(--bam-accent-soft, #dce8cf);
    --bam-b-cta: var(--bam-cta, #17502f);
    --bam-b-cta-ink: var(--bam-cta-ink, #d4f75a);
    --bam-b-cta-hover: var(--bam-cta-hover, #10231a);
    --bam-b-focus: var(--bam-focus, #2563eb);
    --bam-b-body: var(--bam-font-body, "Source Sans 3", ui-sans-serif, system-ui, sans-serif);
    --bam-b-display: var(--bam-font-display, "Archivo", ui-sans-serif, system-ui, sans-serif);
    --bam-b-mono: var(--bam-font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-family: var(--bam-b-body);
    color: var(--bam-b-ink);
}

.bam-v1 {
    background: var(--bam-b-surface);
}

.bam-site {
    background: var(--bam-b-paper);
}

.bam-site h1,
.bam-site h2,
.bam-v1 h2,
.bam-v1 h3,
.bam-v1 legend {
    font-family: var(--bam-b-display);
    font-stretch: 112%;
    color: var(--bam-b-ink);
}

.bam-site a,
.bam-v1 .eyebrow {
    color: var(--bam-b-accent);
}

.bam-v1 small,
.bam-v1 .muted {
    color: var(--bam-b-ink-2);
}

/* Audience choices read as selectable cards. */
.bam-v1 .choices label {
    border: 1.5px solid var(--bam-b-line);
    border-radius: 10px;
    background: var(--bam-b-surface);
}

.bam-v1 .choices label:has(input:checked) {
    border-color: var(--bam-b-accent);
    background: var(--bam-b-accent-soft);
}

.bam-v1 input:not([type=radio]):not([type=checkbox]),
.bam-v1 textarea,
.bam-v1 select {
    border: 1.5px solid var(--bam-b-line);
    border-radius: 8px;
    background: var(--bam-b-surface);
}

.bam-v1 input:not([type=radio]):not([type=checkbox]):focus,
.bam-v1 textarea:focus,
.bam-v1 select:focus {
    border-color: var(--bam-b-accent);
}

.bam-v1 [data-ui=zips] {
    font-family: var(--bam-b-mono);
}

.bam-v1 input[type=radio],
.bam-v1 input[type=checkbox] {
    accent-color: var(--bam-b-accent);
}

/* Primary buttons: deep green with lime text; secondary: outlined ink. */
.bam-v1 button,
.bam-site .bam-actions button,
.bam-site .bam-action {
    border: 1.5px solid var(--bam-b-cta);
    border-radius: 10px;
    background: var(--bam-b-cta);
    color: var(--bam-b-cta-ink);
    font-weight: 700;
}

.bam-v1 button:hover,
.bam-site .bam-actions button:hover,
.bam-site .bam-action:hover {
    background: var(--bam-b-cta-hover);
    border-color: var(--bam-b-cta-hover);
}

.bam-v1 .secondary,
.bam-site .bam-actions .bam-secondary {
    background: transparent;
    border-color: var(--bam-b-ink);
    color: var(--bam-b-ink);
}

.bam-v1 .secondary:hover,
.bam-site .bam-actions .bam-secondary:hover {
    background: var(--bam-b-accent-soft);
    border-color: var(--bam-b-accent);
    color: var(--bam-b-accent);
}

.bam-v1 :focus-visible,
.bam-site a:focus-visible,
.bam-site button:focus-visible {
    outline-color: var(--bam-b-focus);
}

/* Summary: a tinted panel so the count and minimum stand out. */
.bam-v1 .summary {
    border-left-color: var(--bam-b-line);
}

.bam-v1 [data-ui=result] {
    color: var(--bam-b-ink);
}

.bam-v1 [data-ui=minimum] strong,
.bam-v1 [data-ui=minimum] b {
    font-family: var(--bam-b-display);
}

.bam-v1 hr,
.bam-v1 [data-ui=helpPanel],
.bam-site .bam-band,
.bam-site .bam-offers,
.bam-site .bam-status,
.bam-site > header {
    border-color: var(--bam-b-line);
}

@container bam-builder (max-width: 760px) {
    .bam-v1 .summary {
        border-top-color: var(--bam-b-line);
    }
}