/* BOONORA — "Ink & Brass" design system (owner 10-13, BOONORA-REDESIGN-INK-AND-BRASS-2026-10-13.md).
 *
 * ONE stylesheet for every Boonora surface (the Business terminal and the member app first). Before this,
 * every page carried its own :root block (~130 hex values, two competing golds, 4 font pairings, 41 sizes).
 *
 * Rules the tokens encode:
 *   - Paper + ink for the work; Night (#0C1524, the brand-file navy) for the member card and dark mode.
 *   - BRASS MEANS BOONS. Gold is never decoration and never a button: buttons are ink.
 *   - Status is its own colour AND a word (Paid / Pending / Failed / Info), never colour alone.
 *   - Money is tabular. Every Boons number is shown with its dollar value.
 *   - Touch: 48 minimum, 56 primary, 64–80 keypad.
 *
 * Two tiers: primitives (--bn-p-*) → semantic tokens (--bn-*). Components use semantic tokens only; dark
 * mode remaps the semantic layer. A page opts into dark with <html data-theme="dark">, or follows the
 * device when it has no data-theme.
 */

/* Newsreader (serif: amounts, balances, greetings) + Geist (UI). Both SIL Open Font License. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root {
  /* ── primitives ── */
  --bn-p-paper: #F6F4EF;  --bn-p-paper-2: #F1EEE7; --bn-p-white: #FFFFFF;
  --bn-p-stone-100: #ECE9E2; --bn-p-stone-200: #E4E0D6; --bn-p-stone-300: #C9C3B8; --bn-p-stone-400: #8F887C;
  --bn-p-stone-600: #5E5850; --bn-p-ink: #1C1A17;
  --bn-p-night: #0C1524; --bn-p-night-2: #131D2F; --bn-p-night-3: #1B2740; --bn-p-night-line: #26324A;
  --bn-p-bone: #F3EEE4; --bn-p-bone-2: #C9C3B8;
  --bn-p-brass: #C9922F; --bn-p-brass-light: #F2C879; --bn-p-brass-text: #8A5A00; --bn-p-brass-tint: #FFF6E0;
  --bn-p-green: #17794A; --bn-p-green-tint: #EAF6EE; --bn-p-green-d: #4CC58A;
  --bn-p-orange: #B4470B; --bn-p-orange-tint: #FDEEE3; --bn-p-orange-d: #FF9A57;
  --bn-p-red: #C2341F; --bn-p-red-tint: #FDECE8; --bn-p-red-d: #FF7A66;
  --bn-p-blue: #1D5FD1; --bn-p-blue-tint: #EAF1FC; --bn-p-blue-d: #7FB0FF;

  /* ── semantic (light) ── */
  --bn-bg: var(--bn-p-paper);              /* the canvas */
  --bn-bg-sunk: var(--bn-p-paper-2);       /* sidebars, wells */
  --bn-surface: var(--bn-p-white);         /* cards, rows, keys */
  --bn-line: var(--bn-p-stone-200);        /* hairlines */
  --bn-line-soft: var(--bn-p-stone-100);   /* dividers inside a card */
  --bn-line-strong: var(--bn-p-stone-400); /* input edges (3:1) */
  --bn-text: var(--bn-p-ink);
  --bn-text-2: var(--bn-p-stone-600);      /* secondary — 7:1 on white */
  --bn-text-3: var(--bn-p-stone-400);      /* placeholder only */
  --bn-fill: var(--bn-p-ink);              /* primary button */
  --bn-on-fill: var(--bn-p-white);
  --bn-fill-press: #000000;
  --bn-boon: var(--bn-p-brass);            /* coin, ring, Boons marks */
  --bn-boon-text: var(--bn-p-brass-text);  /* Boons numbers on light */
  --bn-boon-tint: var(--bn-p-brass-tint);
  --bn-ok: var(--bn-p-green);    --bn-ok-tint: var(--bn-p-green-tint);
  --bn-warn: var(--bn-p-orange); --bn-warn-tint: var(--bn-p-orange-tint);
  --bn-bad: var(--bn-p-red);     --bn-bad-tint: var(--bn-p-red-tint);
  --bn-info: var(--bn-p-blue);   --bn-info-tint: var(--bn-p-blue-tint);
  --bn-card-bg: var(--bn-p-night);         /* the member card is night in both themes */
  --bn-card-text: var(--bn-p-bone);
  --bn-card-boon: var(--bn-p-brass-light);
  --bn-card-edge: rgba(242, 200, 121, .28);

  /* ── type ── */
  --bn-font-ui: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bn-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --bn-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --bn-t-display: 500 72px/1 var(--bn-font-display);
  --bn-t-title-l: 500 40px/1.1 var(--bn-font-display);
  --bn-t-title: 500 30px/1.15 var(--bn-font-display);
  --bn-t-head: 600 22px/1.25 var(--bn-font-ui);
  --bn-t-sub: 600 18px/1.3 var(--bn-font-ui);
  --bn-t-body: 400 17px/1.45 var(--bn-font-ui);
  --bn-t-body-s: 400 15px/1.45 var(--bn-font-ui);
  --bn-t-label: 600 15px/1.3 var(--bn-font-ui);
  --bn-t-meta: 400 13px/1.4 var(--bn-font-ui);
  --bn-t-eyebrow: 600 12px/1.3 var(--bn-font-ui);

  /* ── space · radius · touch · motion ── */
  --bn-s1: 4px; --bn-s2: 8px; --bn-s3: 12px; --bn-s4: 16px; --bn-s5: 20px; --bn-s6: 24px;
  --bn-s7: 32px; --bn-s8: 40px; --bn-s9: 48px; --bn-s10: 64px;
  --bn-r-xs: 4px; --bn-r-sm: 8px; --bn-r-md: 12px; --bn-r-lg: 16px; --bn-r-xl: 24px; --bn-r-full: 9999px;
  --bn-touch: 48px; --bn-touch-primary: 56px; --bn-touch-key: 72px;
  --bn-lift: 0 2px 6px rgba(28,26,23,.08), 0 8px 24px -8px rgba(28,26,23,.12);
  --bn-lift-sheet: 0 12px 40px -12px rgba(28,26,23,.25);
  --bn-ease: cubic-bezier(.2,0,0,1); --bn-ease-in: cubic-bezier(.05,.7,.1,1); --bn-ease-out: cubic-bezier(.3,0,.8,.15);
  --bn-d-press: 100ms; --bn-d-fast: 150ms; --bn-d-base: 250ms; --bn-d-sheet: 350ms; --bn-d-celebrate: 600ms;

  color-scheme: light;
}

/* ── dark: Night ground, bone text, brass light for Boons. No shadows; elevation = lighter surface. ── */
:root[data-theme="dark"] {
  --bn-bg: var(--bn-p-night); --bn-bg-sunk: #0A111E; --bn-surface: var(--bn-p-night-2);
  --bn-line: var(--bn-p-night-line); --bn-line-soft: #1F2A40; --bn-line-strong: #5B6680;
  --bn-text: var(--bn-p-bone); --bn-text-2: #B5BAC6; --bn-text-3: #7D8597;
  --bn-fill: var(--bn-p-bone); --bn-on-fill: var(--bn-p-night); --bn-fill-press: #FFFFFF;
  --bn-boon: var(--bn-p-brass-light); --bn-boon-text: var(--bn-p-brass-light); --bn-boon-tint: rgba(242,200,121,.12);
  --bn-ok: var(--bn-p-green-d); --bn-ok-tint: rgba(76,197,138,.14);
  --bn-warn: var(--bn-p-orange-d); --bn-warn-tint: rgba(255,154,87,.14);
  --bn-bad: var(--bn-p-red-d); --bn-bad-tint: rgba(255,122,102,.14);
  --bn-info: var(--bn-p-blue-d); --bn-info-tint: rgba(127,176,255,.14);
  --bn-card-bg: var(--bn-p-night-3);
  --bn-lift: 0 0 0 1px rgba(255,255,255,.06); --bn-lift-sheet: 0 0 0 1px rgba(255,255,255,.08);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bn-bg: var(--bn-p-night); --bn-bg-sunk: #0A111E; --bn-surface: var(--bn-p-night-2);
    --bn-line: var(--bn-p-night-line); --bn-line-soft: #1F2A40; --bn-line-strong: #5B6680;
    --bn-text: var(--bn-p-bone); --bn-text-2: #B5BAC6; --bn-text-3: #7D8597;
    --bn-fill: var(--bn-p-bone); --bn-on-fill: var(--bn-p-night); --bn-fill-press: #FFFFFF;
    --bn-boon: var(--bn-p-brass-light); --bn-boon-text: var(--bn-p-brass-light); --bn-boon-tint: rgba(242,200,121,.12);
    --bn-ok: var(--bn-p-green-d); --bn-ok-tint: rgba(76,197,138,.14);
    --bn-warn: var(--bn-p-orange-d); --bn-warn-tint: rgba(255,154,87,.14);
    --bn-bad: var(--bn-p-red-d); --bn-bad-tint: rgba(255,122,102,.14);
    --bn-info: var(--bn-p-blue-d); --bn-info-tint: rgba(127,176,255,.14);
    --bn-card-bg: var(--bn-p-night-3);
    --bn-lift: 0 0 0 1px rgba(255,255,255,.06); --bn-lift-sheet: 0 0 0 1px rgba(255,255,255,.08);
    color-scheme: dark;
  }
}

/* ── base ── */
.bn, .bn body { background: var(--bn-bg); color: var(--bn-text); font: var(--bn-t-body); -webkit-font-smoothing: antialiased; }
.bn *, .bn *::before, .bn *::after { box-sizing: border-box; }
.bn :focus-visible { outline: 2px solid var(--bn-text); outline-offset: 2px; border-radius: var(--bn-r-sm); }
.bn-num { font-variant-numeric: tabular-nums; }
.bn-serif { font-family: var(--bn-font-display); font-optical-sizing: auto; }
.bn-eyebrow { font: var(--bn-t-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-text-2); }
.bn-muted { color: var(--bn-text-2); }

/* ── buttons: primary is ink; Boons never colour a button ── */
.bn-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bn-s2);
  min-height: var(--bn-touch); padding: 0 var(--bn-s5); border: 0; border-radius: var(--bn-r-md);
  font: var(--bn-t-label); text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;
  background: var(--bn-fill); color: var(--bn-on-fill);
  transition: transform var(--bn-d-press) var(--bn-ease), background var(--bn-d-press) var(--bn-ease); }
.bn-btn:active { transform: scale(.98); background: var(--bn-fill-press); }
.bn-btn:disabled, .bn-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.bn-btn--lg { min-height: var(--bn-touch-primary); font-size: 17px; border-radius: 14px; }
.bn-btn--block { display: flex; width: 100%; }
.bn-btn--secondary { background: var(--bn-surface); color: var(--bn-text); box-shadow: inset 0 0 0 1px var(--bn-p-stone-300); }
:root[data-theme="dark"] .bn-btn--secondary { box-shadow: inset 0 0 0 1px var(--bn-line-strong); }
.bn-btn--secondary:active { background: var(--bn-line-soft); }
.bn-btn--ghost { background: transparent; color: var(--bn-text); text-decoration: underline; text-underline-offset: 4px; padding: 0 var(--bn-s2); }
.bn-btn--ghost:active { background: var(--bn-line-soft); }
.bn-btn--danger { background: var(--bn-bad-tint); color: var(--bn-bad); }
.bn-iconbtn { width: var(--bn-touch); height: var(--bn-touch); display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--bn-r-md); background: transparent; color: var(--bn-text); cursor: pointer; }
.bn-iconbtn:active { background: var(--bn-line-soft); }

/* ── surfaces ── */
.bn-card { background: var(--bn-surface); border-radius: var(--bn-r-lg); box-shadow: 0 0 0 1px var(--bn-line); padding: var(--bn-s5); }
.bn-sheet { background: var(--bn-surface); border-radius: var(--bn-r-xl) var(--bn-r-xl) 0 0; box-shadow: var(--bn-lift-sheet); }
.bn-divider { height: 1px; background: var(--bn-line-soft); border: 0; margin: var(--bn-s3) 0; }

/* ── fields ── */
.bn-field { display: flex; flex-direction: column; gap: 6px; }
.bn-label { font: 600 13px/1.3 var(--bn-font-ui); color: var(--bn-text-2); }
.bn-input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: var(--bn-r-md); border: 0;
  background: var(--bn-surface); color: var(--bn-text); font: 400 17px/1.3 var(--bn-font-ui);
  box-shadow: inset 0 0 0 1px var(--bn-line-strong); font-variant-numeric: tabular-nums; }
.bn-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bn-text); }
.bn-input::placeholder { color: var(--bn-text-3); }

/* ── money ── */
.bn-amount { font: var(--bn-t-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; font-family: var(--bn-font-display); }
.bn-boons { color: var(--bn-boon-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.bn-pos { color: var(--bn-ok); font-variant-numeric: tabular-nums; }
.bn-neg { color: var(--bn-bad); font-variant-numeric: tabular-nums; }

/* ── status pill: colour + word ── */
.bn-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--bn-r-full);
  font: 600 13px/1 var(--bn-font-ui); white-space: nowrap; }
.bn-pill--ok { background: var(--bn-ok-tint); color: var(--bn-ok); }
.bn-pill--warn { background: var(--bn-warn-tint); color: var(--bn-warn); }
.bn-pill--bad { background: var(--bn-bad-tint); color: var(--bn-bad); }
.bn-pill--info { background: var(--bn-info-tint); color: var(--bn-info); }
.bn-pill--boon { background: var(--bn-boon-tint); color: var(--bn-boon-text); }

/* ── list rows ── */
.bn-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--bn-line-soft); }
.bn-row:first-child { border-top: 0; }
.bn-avatar { width: 40px; height: 40px; flex: none; border-radius: var(--bn-r-full); display: inline-flex; align-items: center; justify-content: center;
  background: var(--bn-bg); color: var(--bn-text); font: 600 14px/1 var(--bn-font-ui); box-shadow: 0 0 0 1px var(--bn-line); }

/* ── keypad ── */
.bn-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bn-key { min-height: var(--bn-touch-key); border: 0; border-radius: 14px; background: var(--bn-surface); color: var(--bn-text);
  box-shadow: 0 0 0 1px var(--bn-line); font: 500 28px/1 var(--bn-font-ui); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: transform var(--bn-d-press) var(--bn-ease), background var(--bn-d-press) var(--bn-ease); }
.bn-key:active { transform: scale(.97); background: var(--bn-line-soft); }

/* ── the member card (night in both themes) ── */
.bn-membercard { background: var(--bn-card-bg); color: var(--bn-card-text); border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 18px 36px -20px rgba(12,21,36,.6), inset 0 0 0 1px var(--bn-card-edge); }
.bn-membercard .bn-boons { color: var(--bn-card-boon); }

/* ── icons (js/boonora-icons.js sprite: <svg class="bi"><use href="#bi-…"/></svg>) ── */
.bn .bi { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }
.bn .bi--24 { width: 24px; height: 24px; }

/* ── motion: only for real state changes; never the amount ── */
@keyframes bn-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bn-coin { 0% { transform: translateY(-28px) scale(.86); opacity: 0; } 60% { transform: translateY(3px) scale(1.02); opacity: 1; } 100% { transform: none; opacity: 1; } }
.bn-rise { animation: bn-rise var(--bn-d-sheet) var(--bn-ease-in) both; }
.bn-coin-in { animation: bn-coin var(--bn-d-celebrate) var(--bn-ease-in) both; }
@media (prefers-reduced-motion: reduce) {
  .bn *, .bn *::before, .bn *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}