/* Coffman Girls Tennis Boosters — brand layer for the 2026-2027 registration site.
 *
 * Source of truth for the brand itself is /.well-known/brand.json (validated against AdCP
 * brand.json v3.1.4). This file is the CSS *application* of that brand: design tokens as custom
 * properties, plus a small set of semantic component classes the pages point at. Load it AFTER
 * tailwind.min.css so these rules win the cascade.
 *
 * Why component classes instead of retinting Tailwind utilities: the Tailwind build is vendored
 * (no build step to reconfigure a theme), and the interactive markup is emitted from both HTML and
 * JS. One semantic class per element type keeps the brand in one place and out of the templates.
 *
 * Fonts (Poppins/Roboto) are self-hosted in assets/css/fonts.css — link that BEFORE this file. */

:root {
    /* Colors — mirror brand.json `colors` / `colorways`. */
    --brand-primary: #3f8b53;        /* Coffman green — identity, borders, focus, progress */
    --brand-accent: #2a5e39;         /* darker green — any fill under white text (WCAG AA: 7.6:1) */
    --brand-accent-hover: #24512f;
    --brand-ink: #0b100c;            /* headings / near-black */
    --brand-body: #334155;           /* body copy */
    --brand-label: #475569;
    --brand-border: #dce7df;
    --brand-divider: #eaf3ec;
    --brand-surface-1: #f7faf8;      /* page background */
    --brand-surface-2: #eaf3ec;      /* tinted panels */
    --brand-error: #b3261e;

    --brand-radius: 12px;
    --brand-radius-sm: 8px;
    --brand-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
        'Helvetica Neue', Arial, sans-serif;
    --brand-ring: 0 0 0 3px rgba(63, 139, 83, 0.28);
}

/* ---- Typography & page ---- */
body {
    font-family: var(--brand-font);
    color: var(--brand-body);
    background-color: var(--brand-surface-1);
}
h1, h2, h3, legend {
    color: var(--brand-ink);
}

/* ---- Buttons ---- */
.brand-btn {
    background-color: var(--brand-accent);
    color: #fff;
    font-weight: 700;
    border-radius: var(--brand-radius);
    transition: background-color 0.2s ease;
}
.brand-btn:hover { background-color: var(--brand-accent-hover); }
.brand-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.brand-btn:disabled { background-color: #9aa79e; cursor: not-allowed; }

.brand-btn-secondary {
    background-color: #fff;
    color: var(--brand-body);
    font-weight: 600;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
    transition: background-color 0.2s ease;
}
.brand-btn-secondary:hover { background-color: var(--brand-surface-2); }
.brand-btn-secondary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ---- Form fields ---- */
.brand-field {
    width: 100%;
    background: #fff;
    color: var(--brand-ink);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-sm);
}
.brand-field:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--brand-ring);
}
.brand-field.invalid { border-color: var(--brand-error); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

/* Native controls tint (checkboxes, radios) — accent-color is the whole job. */
.brand-check { accent-color: var(--brand-accent); }

/* ---- Surfaces ---- */
.brand-panel {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
}
/* Neutral bordered option card (extra tank, meal opt-out) — white, not tinted. */
.brand-panel-outline {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius);
}

.brand-card-accent { border-top: 6px solid var(--brand-primary); }

.brand-accent-text { color: var(--brand-accent); }
.brand-ink-text { color: var(--brand-ink); }

/* ---- Progress bar ---- */
.brand-progress-track { background: var(--brand-divider); }
.brand-progress-bar { background: var(--brand-primary); }