/* BxAI design tokens — read from the logo on 25 September 2026. Copy this file into a project unchanged and
   style through the tokens; never a hex in a component (docs/screens.md, S7). `node brand/check-contrast.mjs`
   fails when a small-text token drops below 4.5:1 on its ground. Light on bare :root; dark under both the
   system preference (unless the page pins light) and an explicit data-theme="dark". */
:root {
  color-scheme: light;

  /* brand, as sampled from the logo: bright versions for the logo, fills and large type only */
  --bx-navy:        #04305c;   /* "Bx", the ridge, the caption: identity, primary button fill, header bands */
  --bx-heading:     #04305c;   /* headings and the big number: navy on light grounds, near-white on dark (12.4:1) */
  --bx-blue:        #0386e2;   /* where "A" begins: fills, large type, the mark; 3.6:1, never small text */
  --bx-teal:        #04aead;   /* the middle of the gradient: fills; 2.6:1 */
  --bx-green:       #25bd69;   /* where "I" ends: fills, the mark's top node; 2.3:1 */
  --bx-gradient:    linear-gradient(90deg, #0386e2 0%, #04aead 55%, #25bd69 100%);  /* the "AI"; one hero moment per screen */

  /* the same colours as ink, dark enough to read small: 4.5:1 or better on ground and card */
  --bx-blue-ink:    #0b5aa0;   /* links, in-progress text; 6.6:1 */
  --bx-teal-ink:    #0b7d86;   /* secondary emphasis; 4.6:1 */
  --bx-green-ink:   #157a48;   /* done, measured, on target; 5.0:1 */
  --bx-amber-ink:   #9a5106;   /* needs a decision, below target; 5.5:1 */
  --bx-red-ink:     #b3261e;   /* losing money, an error; 6.1:1 */

  /* tints behind chips and notes: pale tint, heavy ink text */
  --bx-blue-tint:   #e3f0fc;
  --bx-teal-tint:   #dff5f6;
  --bx-green-tint:  #e2f6ea;
  --bx-amber-tint:  #fdf1de;
  --bx-red-tint:    #fbe7e5;

  /* neutrals, cool with a hint of the navy */
  --bx-ground:      #f5f7fa;   /* the page */
  --bx-card:        #ffffff;   /* cards, borderless, with the shadow */
  --bx-sunk:        #eef1f5;   /* inputs and inset panels */
  --bx-rule:        #d9e0e8;   /* dividers between things */
  --bx-rule-soft:   #e8edf2;   /* dividers inside a card */
  --bx-ink:         #12233a;   /* headings, the big number; 14.7:1 */
  --bx-text:        #23324a;   /* body; 12.0:1 */
  --bx-text-soft:   #536478;   /* secondary; 5.7:1 */
  --bx-text-faint:  #8a97a8;   /* decorative labels 18px+ or bold 14px+ only; 2.8:1, never body text */

  /* on navy */
  --bx-on-navy:       #ffffff; /* 13.3:1 */
  --bx-on-navy-blue:  #62b6ff; /* 6.1:1 */
  --bx-on-navy-green: #5ee09a; /* 8.0:1 */

  /* shape, depth, type */
  --bx-radius:      14px;
  --bx-radius-pill: 999px;
  --bx-shadow:      0 1px 2px rgba(4,48,92,.05), 0 10px 28px -18px rgba(4,48,92,.30);
  --bx-font-display: Montserrat, "Arial Black", "Helvetica Neue", Arial, sans-serif;  /* the wordmark's face: headings 700–800, tight */
  --bx-font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bx-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bx-navy: #0b4d8a; --bx-gradient: linear-gradient(90deg, #62b6ff 0%, #4fd0d8 55%, #5ee09a 100%);
    --bx-blue-ink: #62b6ff; --bx-teal-ink: #4fd0d8; --bx-green-ink: #5ee09a; --bx-amber-ink: #f0b45a; --bx-red-ink: #f08b82;
    --bx-blue-tint: #10304f; --bx-teal-tint: #0f3538; --bx-green-tint: #113626; --bx-amber-tint: #3a2a10; --bx-red-tint: #3d1c19;
    --bx-ground: #0f1a2b; --bx-card: #172539; --bx-sunk: #132031; --bx-rule: #2a3a50; --bx-rule-soft: #22314a;
    --bx-heading: #eef2f7; --bx-ink: #eef2f7; --bx-text: #e0e7ef; --bx-text-soft: #a9b6c6; --bx-text-faint: #75849a;
    --bx-on-navy: #ffffff; --bx-on-navy-blue: #9ccfff; --bx-on-navy-green: #8ceab5;
    --bx-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bx-navy: #0b4d8a; --bx-gradient: linear-gradient(90deg, #62b6ff 0%, #4fd0d8 55%, #5ee09a 100%);
  --bx-blue-ink: #62b6ff; --bx-teal-ink: #4fd0d8; --bx-green-ink: #5ee09a; --bx-amber-ink: #f0b45a; --bx-red-ink: #f08b82;
  --bx-blue-tint: #10304f; --bx-teal-tint: #0f3538; --bx-green-tint: #113626; --bx-amber-tint: #3a2a10; --bx-red-tint: #3d1c19;
  --bx-ground: #0f1a2b; --bx-card: #172539; --bx-sunk: #132031; --bx-rule: #2a3a50; --bx-rule-soft: #22314a;
  --bx-heading: #eef2f7; --bx-ink: #eef2f7; --bx-text: #e0e7ef; --bx-text-soft: #a9b6c6; --bx-text-faint: #75849a;
  --bx-on-navy: #ffffff; --bx-on-navy-blue: #9ccfff; --bx-on-navy-green: #8ceab5;
  --bx-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
}