/*!
 * BBN Member Portal — DESIGN TOKENS. bbn-portal.
 * Release Gate 1 (Structural + Visual Product Design), 2026-09-14.
 *
 * ===== WHY THIS FILE EXISTS ================================================================
 * Before this file the portal had ZERO CSS custom properties and 42 distinct hex literals
 * spread across 5 stylesheets and 26 JS-injected <style> blocks. That is not a style
 * preference — it was measured:
 *
 *   5 greens   #0F6E56(x18) #0F5C4A(x10) #085041(x8) #0B4437(x6) #3F7D4E(x1)
 *   8 browns   #3F291B #6B5B4D #5B5347 #8A7C6E #7A6B5D #4A3B2E #9A9287 #A4968A
 *   5 golds    #C6A664 #8A6416 #C89A3C #7A5A2C
 *   8 creams   #FBF7EF #F7EFD9 #F2EADA #FFFDF9 #FBF7EC #F1EDE3 #EFEDE8 #EDE7DC
 *
 * A de-facto core palette DID already exist and was used consistently in 8-11 files
 * (#0F6E56 / #3F291B / #6B5B4D / #C6A664 / #FBF7EF / #E7E1D5 / #085041). The drift was
 * concentrated in a handful of newer files. This file promotes that existing core to a named,
 * documented contract rather than inventing a new palette — nothing that already looked right
 * changes colour.
 *
 * ===== THE RULE THIS FILE ENFORCES =========================================================
 * ONE HEX CANNOT DO SEVEN JOBS. #C6A664 gold was simultaneously a focus ring, a form-control
 * border, an unread status dot, a badge border and an avatar background. Each of those has a
 * DIFFERENT WCAG threshold, so a single literal could not satisfy them all — and four of those
 * uses measured 2.17-2.67:1 where 3:1 is required. Naming --bbn-focus-ring separately from
 * --bbn-accent is what makes the requirement checkable instead of invisible.
 *
 * ===== DECORATIVE vs MEANINGFUL BORDERS ====================================================
 * --bbn-border (#E7E1D5) measures 1.22:1 on the cream canvas. That is CORRECT and is NOT a
 * defect: SC 1.4.11 applies to non-text content *required to understand the content*. A card
 * or callout edge that sits beside a tinted background, an icon and AA-passing text is
 * redundant decoration. Forcing every hairline to 3:1 would outline the whole product in mud.
 * When a border is the ONLY carrier of state (a selected segmented-control option with no
 * other cue), use --bbn-border-strong (3.31:1 on cream, 3.53:1 on white) instead.
 *
 * ===== SCOPE ===============================================================================
 * Enqueued ONLY on registered portal/partner/admin routes plus /reset-password/ (see
 * portal-assets.php), exactly like nav.css. The public marketing site never loads it, so the
 * bare :root selector here cannot reach it. If this file is ever enqueued more widely, that
 * assumption is the first thing to revisit.
 *
 * Every ratio quoted below was computed, not estimated.
 */

:root {
  /* ===== BRAND ============================================================================
   * DARKENED 2026-09-14 at the owner's direction: "colors like teal i like its just not enough
   * dark to contrast with light". The old #0F6E56 measured 6.20:1 on white — it PASSED AA, but
   * passing and reading comfortably are different things, and the second is what was asked for.
   *
   * The hue is deliberately unchanged: #0F6E56 is 165°, #0A5A45 is 164°, #07493B is 167°. This
   * is the same teal at a lower lightness, not a new colour.
   *
   *   teal        8.20:1 on white · 7.67:1 on cream   (was 6.20 / 5.81)
   *   teal-deep  10.37:1 on white · 9.70:1 on cream   (was 9.40 / 8.80)
   *   ink        13.60:1 on white · 12.73:1 on cream
   *
   * Both steps moved together so hover/pressed stays a perceptible change rather than
   * collapsing into the base. Every consumer improves: the brand is a link colour, a button
   * BACKGROUND carrying white text, and the nav brand block — darkening raises contrast in all
   * three directions at once.
   */
  --bbn-brand:            #0A5A45;
  --bbn-brand-deep:       #07493B;
  --bbn-brand-tint:       #E1F5EE;   /* teal wash: selected rows, success surfaces */
  --bbn-ink:              #3F291B;   /* warm near-black — the BBN brown, not grey */

  /* ===== ACCENT (GOLD) ====================================================================
   * SPLIT DELIBERATELY. The gold is a brand signature and stays visible — but it may never
   * carry meaning on its own.
   *   --bbn-accent      2.32:1 on white. DECORATIVE ONLY. Legal uses: a rule/flourish beside
   *                     text that already passes, a large filled block, an avatar ground.
   *                     ILLEGAL uses: focus rings, form borders, status dots, icon strokes,
   *                     any text.
   *   --bbn-accent-ink  5.02:1 on cream · 4.68:1 on the warning tint. This is the gold you
   *                     use when the gold must be READ.
   */
  --bbn-accent:           #C6A664;
  --bbn-accent-ink:       #8A6416;

  /* ===== SURFACES =========================================================================
   * The canvas is warm on purpose. A flat white portal was explicitly rejected.
   */
  --bbn-canvas:           #FBF7EF;   /* page ground */
  --bbn-surface:          #FFFFFF;   /* cards, panels, table rows */
  --bbn-surface-tint:     #F2EADA;   /* subtle warm block: section headers, empty states */
  --bbn-surface-sunken:   #F1EDE3;   /* wells, inset lists, composer background */

  /* ===== SURFACE HIERARCHY — Visual Depth v1, 2026-09-19 ==================
   * THE PROBLEM THESE SOLVE. Every card in the member workspace was
   * --bbn-surface on --bbn-canvas behind one --bbn-border hairline, so an
   * action the member must take, a service they are connected to and a list
   * of past requests were drawn identically. The information architecture was
   * never the issue; three kinds of thing shared one appearance.
   *
   * Three surfaces, and no more. A fourth would start to read as decoration.
   * All three are DERIVED from colours already in the file — none is a new
   * hue — and none of them carries meaning alone: each is paired with an edge
   * and a label, per the decorative-vs-meaningful rule above.
   *
   * Measured on each surface (AA needs 4.5:1 for body text):
   *                    --bbn-text  text-secondary  text-muted
   *   surface-subtle      13.15         7.32          6.29
   *   surface-action      12.32         6.86          5.89   accent-ink 4.86
   *   surface-connected   12.42         6.92          5.94   brand      7.49
   *
   * WHY THEY SIT SO CLOSE TO THE CANVAS (1.02–1.03:1). That is the point: they
   * separate blocks perceptually without becoming colour fields. A tint strong
   * enough to measure as "contrast" would be a coloured card, which is the
   * gradient-heavy look that was explicitly rejected.
   */
  --bbn-surface-subtle:    #FDFBF6;  /* supporting content — quieter than a white card */
  --bbn-surface-action:    #FBF3E2;  /* THIS NEEDS YOU. Lighter than --bbn-warning-surface
                                        (#F7EFD9) on purpose: needing an action is not a
                                        warning, and the two must not read as one state. */
  --bbn-surface-connected: #EDF7F2;  /* a BBN service the member is connected to. Distinct
                                        from --bbn-success-surface (#E1F5EE), because
                                        "connected" is not "saved successfully". */

  /* The edges those surfaces use. Deliberately NOT new tokens: --bbn-accent-ink
   * (4.86:1 on the action surface) is already "the gold you use when the gold
   * must be read", and --bbn-brand is already 7.49:1 on the connected surface.
   * The decorative --bbn-accent (#C6A664) measures 2.16:1 there and remains
   * illegal as a state-carrying edge. */

  /* ===== BORDERS ==========================================================================
   * border        1.22:1 on cream — DECORATIVE hairline, always paired with another cue.
   * border-strong 3.31:1 on cream / 3.53:1 on white — use when the border ALONE carries state.
   */
  --bbn-border:           #E7E1D5;
  --bbn-border-strong:    #998663;

  /* ===== TEXT =============================================================================
   * Every value here clears 4.5:1 on BOTH --bbn-canvas and --bbn-surface.
   * text-muted is the canonical warm grey-brown at 6.09:1 on cream. The retired values
   * #8A7C6E (3.79:1), #A4968A (2.69:1), #9A9287 (2.88:1) and #7A6B5D (4.81:1 but redundant)
   * must not come back — three of the four failed AA outright.
   */
  --bbn-text:             #3F291B;   /* 12.73:1 on cream */
  --bbn-text-secondary:   #5B5347;   /*  7.09:1 on cream — supporting copy */
  --bbn-text-muted:       #6B5B4D;   /*  6.09:1 on cream — metadata, labels, timestamps */
  --bbn-text-on-brand:    #FFFFFF;   /*  6.20:1 on teal, 9.40:1 on teal-deep */
  /* SEMANTIC tokens that REFERENCE the brand rather than copying it.
   *
   * These were literals, and darkening --bbn-brand left them behind: buttons went to #0A5A45
   * while every link stayed #0F6E56. Two shades of teal on one screen reads as a mistake, and
   * it was invisible until the anchors were measured. A semantic token whose value is a COPY of
   * a base token is a silent drift waiting to happen; make the relationship explicit and it
   * cannot happen again.
   *
   * Standard link = the brand teal (8.20:1 on white, 7.67:1 on cream).
   * Hover = the deeper step (10.37:1), and components add an underline so hover is never
   * signalled by colour alone.
   */
  --bbn-link:             var(--bbn-brand);
  --bbn-link-hover:       var(--bbn-brand-deep);
  /* Visited is NOT styled separately. The portal's links are navigation and actions, not
   * reference material, and a visited colour there implies "already dealt with" — which is
   * wrong for a funding opportunity you looked at once. Declared so the decision is visible
   * rather than an omission someone later "fixes". */

  /* ===== STATUS ===========================================================================
   * Each status ships a surface + a border + a text colour that passes ON ITS OWN surface,
   * so a callout never depends on the page ground being what we expect.
   * Colour is never the only cue — every status component also carries an icon and a word.
   */
  /* SUCCESS SEPARATED FROM BRAND 2026-09-14.
   *
   * Success was #085041 — a dark teal. That was fine while the brand was #0F6E56, but
   * darkening the brand collapsed the distinction: measured CIE dE of 3.1 from --bbn-brand-deep
   * and 5.8 from --bbn-brand. Below roughly dE 14 two colours read as the same colour at a
   * glance, so "saved successfully" looked identical to an ordinary brand element. A status
   * colour that looks like a brand accent is not a status colour.
   *
   * #1B6E2E is a true green (hue 134 vs the brand's 164) at dE 26.1 from the brand — clearly a
   * different colour, still dark enough for AA at 5.58:1 on its own surface.
   *
   * The SURFACE deliberately stays #E1F5EE. A green wash measured only dE 3.2 from the existing
   * tint: at that lightness hue differences compress to almost nothing, so recolouring it would
   * be churn without a perceptual gain. The text colour, the icon and the word carry the
   * meaning; the wash only separates the block from the page.
   */
  --bbn-success:          #1B6E2E;   /* 5.58:1 on its surface, 6.33:1 on white */
  --bbn-success-surface:  #E1F5EE;
  --bbn-success-border:   #9FE1CB;

  --bbn-warning:          #8A6416;   /* 4.68:1 on its surface */
  --bbn-warning-surface:  #F7EFD9;
  --bbn-warning-border:   #E3CF9B;

  --bbn-error:            #791F1F;   /* 8.98:1 on its surface */
  --bbn-error-surface:    #FCEBEB;
  --bbn-error-border:     #F0CACA;

  --bbn-info:             #1D6A8F;   /* 5.22:1 on its surface */
  --bbn-info-surface:     #E7F1F7;
  --bbn-info-border:      #BDD8E6;

  /* ===== FOCUS ============================================================================
   * TWO-TONE, and this is the single most important token in the file.
   *
   * A one-colour ring cannot pass everywhere: the portal focuses controls on white cards, on
   * the cream rail AND on the teal brand block. The old gold ring measured 2.32:1 on white,
   * 2.17:1 on cream and 2.67:1 on teal — it failed SC 1.4.11 on every surface it was used on.
   *
   * A white inner ring + a deep-teal outer ring guarantees that whichever surface is behind
   * it, at least one band has high contrast against it AND the two bands always contrast with
   * each other (11.07:1):
   *     white  vs teal brand block  6.20:1
   *     deep   vs white page       11.07:1
   *     deep   vs cream canvas     10.36:1
   *
   * Applied as: outline:2px solid var(--bbn-focus-inner);
   *             box-shadow:0 0 0 5px var(--bbn-focus-ring);
   */
  --bbn-focus-inner:      #FFFFFF;
  --bbn-focus-ring:       #0B4437;

  /* ===== INTERACTIVE STATE OVERLAYS =======================================================
   * Tints rather than new hues, so hover/active never introduce an unnamed colour.
   */
  /* Tints kept as rgba literals because CSS cannot derive an alpha from a hex custom property
   * without colour-mix(), which is not safe to rely on here. Updated to the new teal by hand —
   * if --bbn-brand changes again, these two must change with it. */
  --bbn-hover-tint:       rgba(10, 90, 69, 0.08);
  --bbn-active-tint:      rgba(10, 90, 69, 0.16);
  --bbn-selected-surface: #E1F5EE;
  --bbn-selected-edge:    var(--bbn-brand);
  --bbn-disabled-text:    #6B5B4D;   /* kept readable — disabled must still be legible */
  --bbn-disabled-surface: #F1EDE3;
  --bbn-disabled-opacity: 0.55;

  /* ===== TYPOGRAPHY =======================================================================
   * Poppins is already the portal's face across every module; declared here so a new surface
   * cannot quietly pick something else.
   */
  --bbn-font:             Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* MEASURE, not a breakpoint. A member screen that stretches the full 1280px turns a short
   * paragraph into one thin line and makes ordinary sections read as a sparse dashboard. This
   * caps the column at a comfortable line length; it never shrinks a narrow viewport, because
   * max-width only binds when the viewport is wider. */
  --bbn-reading:          60rem;

  --bbn-size-page-title:  clamp(22px, 2.4vw, 30px);
  --bbn-size-page-intro:  clamp(14px, 1.2vw, 16px);
  --bbn-size-section:     18px;
  --bbn-size-card-title:  16px;
  --bbn-size-body:        15px;
  --bbn-size-support:     14px;
  --bbn-size-meta:        13px;
  --bbn-size-label:       12.5px;
  --bbn-size-badge:       12px;

  --bbn-weight-title:     650;
  --bbn-weight-section:   600;
  --bbn-weight-strong:    600;
  --bbn-weight-body:      400;

  --bbn-leading-tight:    1.25;
  --bbn-leading-body:     1.55;

  /* ===== LAYOUT ===========================================================================
   * 1180px matches the dashboard's existing max-width, so adopting these tokens does not
   * reflow the one surface that was already composed.
   */
  --bbn-page-max:         1180px;
  --bbn-page-max-narrow:  760px;    /* forms and reading columns */
  --bbn-pad-page:         28px;     /* desktop gutter */
  --bbn-pad-page-mobile:  16px;     /* never below 16px at 375px */
  --bbn-gap-section:      28px;
  --bbn-gap-card:         16px;
  --bbn-pad-card:         18px;

  /* ===== SHAPE + ELEVATION ================================================================
   * Shadows are warm-tinted (brown-black, not neutral black) so they sit on the cream canvas
   * without going grey.
   */
  /* CORNER LANGUAGE — the product standard is ~6px for ordinary UI (owner decision 2026-09-14).
     Applies to: cards, buttons, inputs, search, filters, panels, notices, modal containers.
     Exceptions, which stay round on purpose: pills, pill-shaped badges and chips, avatars, true
     circles, round icon controls, and deliberate display/hero elements such as the mobile sheet.

     The previous scale (6 / 10 / 14) was never a decision — it was the shape the portal drifted
     into, and it had split the product into three corner languages: dashboard and resource cards
     at 10px, directory cards at 16px, capability panels at 8/9/10/12px. Same component type,
     three different radii, none of them chosen.

     ⚠️ Changing these tokens is NOT sufficient on its own. Measured 2026-09-14: of 68 radius
     declarations across portal CSS and JS, --bbn-radius governs exactly ONE rule. The other 63
     are literals inside JS-injected stylesheets. This is the same architectural failure as the
     brand teal — the token system does not control most of the painted product — so a radius
     change has to be carried into the literals too, not just declared here. */
  --bbn-radius-sm:        4px;    /* tight: focus-ring corners, small inline controls */
  --bbn-radius:           6px;    /* THE DEFAULT for ordinary product UI */
  --bbn-radius-lg:        10px;   /* modals and large panels that want a little more */
  --bbn-radius-pill:      999px;

  --bbn-shadow-sm:        0 1px 2px rgba(63, 41, 27, 0.06);
  --bbn-shadow:           0 2px 6px rgba(63, 41, 27, 0.08);
  --bbn-shadow-lg:        0 8px 24px rgba(63, 41, 27, 0.12);

  /* Minimum interactive target. WCAG 2.2 SC 2.5.8 asks 24x24; 44px is the comfortable
   * touch target the portal already uses on the Save control. */
  --bbn-target-min:       44px;
}

/* ===== REDUCED MOTION =======================================================================
 * Declared once, here, so every component that adds a transition or skeleton shimmer inherits
 * the honour-the-setting behaviour instead of each module remembering to.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bbn-motion-fast: 0ms;
    --bbn-motion:      0ms;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    --bbn-motion-fast: 120ms;
    --bbn-motion:      200ms;
  }
}