/* theme.css — THE LOOK, IN ONE PLACE (Nov 10 2026 — step 1 of "the organization chooses its look", SAAS_ROADMAP item 9).
 *
 * Every brand colour and every corner rounding on EVERY page (the officers' dashboard, the member portal, the sign-in pages and
 * the rest) reads from here. Linked in every page's <head>, beside css/mobile.css.
 *
 * Step 2: an organization's admins choose a THEME (Settings → Theme) — one of the ready-made colour schemes (⛔ never free colour
 * picking — Ben, Nov 8: "we don't want somebody picking colors that are going to make the app unreadable"), Rounded or Square
 * corners (--corner 1 or 0), holiday themes with their dates — and the page sets these same variables on <html> at runtime.
 * These defaults are Post 307's: navy #16244F, the cream page, warm panels (the locked scheme, Ben, Nov 5 2026).
 *
 * ⛔ A new colour or radius on a page uses these — var(--navy), calc(Npx * var(--corner)) — never a typed value;
 *   tools/test-look-tokens.mjs fails otherwise.
 * ⚠ Emails, printouts and PDFs keep typed values on purpose (email programs don't read var()); they come LAST (Ben).
 */
:root {
    --navy: #16244F;        /* headers, buttons, card edges, titles */
    --navy-hover: #0F1A3B;  /* the same, pressed / hovered */
    --page: #F2F0EA;        /* the warm cream page behind the cards */
    --panel: #F7F5EF;       /* light inner panels */
    --corner: 1;            /* CARDS: 1 = rounded, 0 = square */
    --corner-btn: 1;        /* BUTTONS, text boxes, drop-downs, status tags (Nov 12 2026 — the corners may differ) */
    --edge: #16244F;        /* the stripe across the top of every card — the navy, except in a holiday theme (Ben, Nov 10) */
    --navy-2: #24386e;      /* the lighter end of the sign-in page's background gradient */
    --band: #0f2a6b;        /* the member portal's scrolling events bar */
}
/* js/theme.js sets these on <html> for the organization's chosen theme (and an admin's trial). Its background icons and the
   trial banner are screen-only: ⛔ never on paper. */
/* ⭐ CARDS AND BUTTONS APART (Ben, Nov 12 2026). On a button, text box, drop-down or status tag, --corner IS the button choice — so
   every calc(Npx * var(--corner)) on those follows it with no change to the pages. :where() keeps this at zero weight. */
:where(button, input, select, textarea, .yfbtn, .gbtn, .badge, .chip, .rsvp-pill) { --corner: var(--corner-btn, 1); }
@media print { #theme-glyphs, #theme-trial-bar { display: none !important; } }