/* ==========================================================================
   THEME — ClariPay  (School Financial Management System)
   --------------------------------------------------------------------------
   The ONLY file in SFMS.Web that is allowed to contain a hex value, together
   with brookscorp.tokens.css upstream. If you are typing "#" anywhere else —
   in a component, a view, a <style> block — you are doing it wrong.

   Approved ClariPay CI (Corporate Identity Guidelines, Aug 2026):

     Ink Navy     #102A43   chrome, sidebar, headings, high-emphasis text
     Civic Teal   #007C78   action — buttons, links, active nav, focus
     Signal Amber #F2A900   the insight point — FILL ONLY, never type
     Paper White  #FFFFFF

   Balance: Navy 62% · Teal 24% · Amber 4% · White 10%.

   Contrast decisions carried over from the CI audit:
     · White on Civic Teal      5.06:1  AA  — teal surfaces take white text
     · Ink Navy on Civic Teal   2.90:1  FAIL — never navy type on teal
     · White on Signal Amber    2.01:1  FAIL — amber always takes navy ink
     · Teal hover DARKENS (never lightens): 5.06:1 -> 5.94:1 on the very
       element the user is about to click.

   Applied via: <html class="theme-claripay">
   ========================================================================== */

.theme-claripay, :root {

  /* ── Brand scale — Ink Navy ─────────────────────────────────────────────
     Chrome and type. 600 is the CI navy; the rest are tints/shades derived
     for surfaces, borders and the dark sidebar. */
  --bc-brand-50:  #EEF2F6;
  --bc-brand-100: #D9E2EC;
  --bc-brand-200: #BCCCDC;
  --bc-brand-300: #9FB3C8;
  --bc-brand-400: #486581;
  --bc-brand-500: #243B53;
  --bc-brand-600: #102A43;   /* INK NAVY — primary chrome */
  --bc-brand-700: #0C2135;
  --bc-brand-800: #091927;
  --bc-brand-900: #06111B;

  /* ── Accent scale — Civic Teal ──────────────────────────────────────────
     Action only. If a teal element is not clickable, not selected and not the
     current step, it should not be teal. */
  --bc-accent-50:  #EBF5F4;
  --bc-accent-100: #CDE7E5;
  --bc-accent-200: #9BD0CD;
  --bc-accent-300: #5FB5B1;
  --bc-accent-400: #2A9994;
  --bc-accent-500: #007C78;   /* CIVIC TEAL — primary action */
  --bc-accent-600: #00706C;   /* hover — darker, deliberately */

  /* Ink on a filled accent surface. _ProvinceTheme recomputes this per province
     — a pale gold accent needs navy type, not white — but it must exist even
     when no province theme is applied. Without a default here, var() resolved
     to nothing on the primary button, `color` became invalid at computed-value
     time and the label inherited a colour indistinguishable from the button
     behind it. A label nobody can read is the one failure this token exists to
     prevent, so it defaults to white: the base accent is dark. */
  --cp-ink-on-accent: #FFFFFF;
  --bc-accent-700: #006662;   /* active, and small accent text */
  --bc-accent-800: #00514E;
  --bc-accent-900: #003B39;

  /* ── Support scale — money that went right ─────────────────────────────── */
  --bc-support-50:  #EAF6EF;
  --bc-support-100: #CFE9DA;
  --bc-support-200: #A6D7BC;
  --bc-support-300: #4FB183;
  --bc-support-400: #2F9E68;
  --bc-support-500: #1E7F52;

  /* ── Neutrals — ClariPay grey ramp ─────────────────────────────────────── */
  --bc-grey-25:  #FAFCFD;
  --bc-grey-50:  #F6F8FA;    /* application background */
  --bc-grey-100: #EDF1F5;
  --bc-grey-200: #D9E2EC;    /* borders */
  --bc-grey-300: #BCCCDC;
  --bc-grey-400: #829AB1;
  --bc-grey-500: #627D98;    /* muted text */
  --bc-grey-600: #486581;
  --bc-grey-700: #334E68;
  --bc-grey-800: #243B53;
  --bc-grey-900: #102A43;

  /* ── Semantic ───────────────────────────────────────────────────────────
     Separate from the brand scales and identical in every province skin.
     Red means one thing everywhere. */
  --bc-success:    #2F9E68;
  --bc-success-bg: #EAF6EF;
  --bc-success-fg: #1E7F52;

  --bc-warning:    #F2A900;   /* Signal Amber — fill only */
  --bc-warning-bg: #FDF3DB;
  --bc-warning-fg: #9A6206;   /* amber type is never amber; this is the ink */

  --bc-danger:     #C1362A;
  --bc-danger-bg:  #FBEDEB;
  --bc-danger-fg:  #A8291F;

  --bc-info:       #2C6E9B;
  --bc-info-bg:    #E9F1F7;
  --bc-info-fg:    #124260;

  --bc-neutral-bg: #ECEEF0;
  --bc-neutral-fg: #486581;

  --bc-purple:     #6B5FC4;
  --bc-purple-bg:  #EEECFA;
  --bc-purple-fg:  #453B91;

  /* ── Signal Amber, named for what it means ─────────────────────────────── */
  --bc-insight:      #F2A900;
  --bc-insight-bg:   #FDF3DB;
  --bc-insight-ink:  var(--bc-brand-600);   /* navy on amber — 7.29:1 */

  /* ── Focus ring — teal at the CI value ─────────────────────────────────── */
  --bc-focus-ring: 0 0 0 3px rgba(0, 124, 120, .30);

  /* ── Typography ─────────────────────────────────────────────────────────
     Public Sans for everything, IBM Plex Mono for money and audit IDs. Both
     open licence — deliberate, because provincial IT will not reliably
     licence a commercial webfont. Self-hosted for the same reason the rest of
     BCDF is: a DBE desktop behind a firewall must render identically. */
  --bc-font-display: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bc-font-body:    "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bc-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bc-font-money:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Money is IBM Plex Mono in ClariPay, not the display face. BCDF's .bc-money
   reads --bc-font-display; this is the one component override the theme owns,
   because the typeface pairing is a brand decision, not a component decision.
   -------------------------------------------------------------------------- */
/* word-spacing pulls the en-ZA thousands separator (a no-break space, which is a
   full character wide in a monospace face) back to the width of a normal gap.
   It is applied identically to every figure, so columns still align. */
.bc-money { font-family: var(--bc-font-money); letter-spacing: -.01em; word-spacing: -.22em; }
.bc-money--hero { letter-spacing: -.02em; }
.bc-money--xl,
.bc-money--lg { letter-spacing: -.015em; }