/* iKAG design tokens — single source of truth for the portal palette.
   Stage 1.3a-tuning · May 5, 2026.
   Linked from every iKAG HTML surface. Touch this file to recolor the brand.
   Each token's last-used surface is in inline comments where non-obvious. */

/* Reserve scrollbar gutter so opening a slider/modal (which sets
   body.overflow:hidden) doesn't make the page jump right by ~15px,
   AND so short pages render the same width as tall pages (Push 101 —
   the navbar avatar drift fix). scrollbar-gutter:stable only activates
   on scroll containers; html overflow:visible is NOT a scroll container,
   so the gutter wasn't being reserved on short pages → 15px viewport
   drift between short and tall pages → avatar wandering 9-15px between
   /taxes (tall, scrollbar visible) and /financials (short, no scrollbar).
   Setting overflow-y:scroll forces the scrollbar to always show, which
   guarantees the gutter is consistent across every page regardless of
   content height. The scrollbar shows in a disabled state when content
   fits — visually quieter than a wandering avatar. */
html {
  /* overflow-y:auto makes html a scroll container so scrollbar-gutter
     can actually reserve space. Combined with scrollbar-gutter:stable,
     short pages reserve the gutter (no scrollbar shows) and tall pages
     show the scrollbar in the SAME reserved space — content width is
     identical regardless of page height. */
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Phase 2.5e Substage 2.8.2.79 — back-arrow slot reservation.
   back-arrow.js injects a 24px chevron + 6px margin-right (30px total)
   before the logo on every non-Dashboard / non-auth page. Without
   reservation, the logo paints in its natural position then shifts
   right by 30px when the script runs post-DOMContentLoaded — Flynn
   flagged this as "the logo displays normal for a second and then
   shifts to make space for the arrow."
   Fix: reserve 30px of left margin on the known logo containers via
   CSS that parses synchronously (tokens.css is linked before body).
   Logo paints at the FINAL position from the first frame. When the
   back-arrow injects as the immediate previous sibling, the adjacent-
   sibling selector releases the margin so the back-arrow occupies
   the reserved space without doubling it.
   On Dashboard / auth pages where the script skips injection, the
   logo permanently sits 30px from the leftmost edge — reads as
   intentional breathing room, no CLS. */
.brand,
.subnav-home,
.ii-home-link,
.topbar-logo,
.nav-logo,
.topbar-link {
  margin-left: 30px;
}
.ikag-back-arrow + .brand,
.ikag-back-arrow + .subnav-home,
.ikag-back-arrow + .ii-home-link,
.ikag-back-arrow + .topbar-logo,
.ikag-back-arrow + .nav-logo,
.ikag-back-arrow + .topbar-link {
  margin-left: 0;
}

:root {
  /* === Core iKAG palette === */
  --navy:            #1B2A4A;                    /* primary brand color */
  --blue:            #0057A4;                    /* tier-3 i29 accent · scorecard pillar */
  --copper:          #C87533;                    /* primary CTA */
  --copper-deep:     #A85F22;                    /* CTA hover */
  --copper-tint:     rgba(200,117,51,0.06);      /* hover bg, copper backings */
  --copper-line:     rgba(200,117,51,0.22);      /* copper hairline accents */
  --copper-lt:       #d4924d;                    /* copper-on-navy text */
  --olive:           #5B6B5A;                    /* tier color */
  --olive-tint:      rgba(91,107,90,0.10);       /* tier hover */
  --burgundy:        #6B1D2A;                    /* danger / sign-out */
  --vine:            #3a7250;                    /* i29 #4 Strong · contract Active */
  --gold:            #c8860f;                    /* i29 #3 Developing · review pending */
  --wine:            #8c2232;                    /* i29 #1 Critical · contract Overdue */
  --steel:           #4e6a80;                    /* i29 #2 */
  --charcoal:        #a4a4a4;                    /* i29 placeholder · tier "Other" */

  /* === Persona tokens ===
     WHO IS SPEAKING, not how well anything scored. The two engines already have
     their colours from the core palette — Claude is --copper and Tron is --navy,
     the pair every "Build with…" engine box uses — so the only person who needed
     one is Flynn, and he needed one that is NOT Tron's navy: two speakers in one
     transcript wearing #1B2A4A are two speakers you have to read a 12px letter to
     tell apart.

     This is a NEW token rather than a reach for --steel. --steel is i29 #2
     "Underperforming"; dressing a person in a score is a token-namespace collision
     this repo has booked twice (--wine/--burgundy, --charcoal), and the second time
     it was booked the note said to give the new meaning its own name. So: named for
     what it is, kept out of the scoring range, and light enough against --navy that
     Flynn's circle and Tron's are never mistaken for one another. */
  --persona-flynn:   #4E71A8;                    /* Flynn's avatar / chips — soft navy, NOT --steel */

  /* === Surface tokens === */
  /* NEUTRAL-COOL, NOT CREAM (Jul 27). This is the PORTAL-WIDE page background —
     every surface on every page sits on it. At #FAFAF7 the blue channel sat 3
     below red, a warm cream, which against the pure-white cards and rails reads
     as a yellow-green wash. Flynn saw it on the Studio, the Board, the header
     buttons, the session hover card, and said it reached the Dashboard and nav
     too — he was right, because it is this one line under all of them. He spent
     an hour finding them one at a time while the cause was here.
     Blue now sits above red, so the page reads as a soft cool grey. */
  --bg:              #FBFBFD;                    /* page bg — neutral-cool, never warm */
  --surface:         #FFFFFF;                    /* card bg */
  --pale:            #e4ecf4;                    /* table header strip · score-pip empty */
  --pale2:           #eef3f9;                    /* metric panel bg · score-pip empty */
  --hairline:        #E6E5E0;                    /* card divider */
  --hairline-strong: #D8D6CF;                    /* input border */
  --white:           #fff;                       /* explicit white token (loader) */

  /* === Ink tokens === */
  --ink:             #1B2A4A;                    /* body text === navy */
  --ink-soft:        #4B5360;                    /* secondary text */
  --ink-mute:        #8A8F99;                    /* tertiary / placeholder */
  --body-text:       #3a4a60;                    /* loader prose body */

  /* === Motion tokens === */
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);

  /* === Font tokens (Push 101 — canonical for portal-wide consistency) ===
     Pages may still declare these inline for backwards compatibility;
     where they don't, this becomes the inherited default. DM Sans +
     Playfair Display are loaded via Google Fonts CDN on every surface,
     so the fallback chain only matters when the CDN is unreachable. */
  --sans:            'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif:           'Playfair Display', Georgia, serif;
}