/* Page chrome for the portfolio: the main nav, and the eyebrow above each H1.
 *
 * Hand-authored. Separate from bridge-read.css on purpose: that file owns
 * running prose and is scoped to the 22 interiors, while the nav also has to
 * reach portfolio/index.html and portfolio/work/, which drive their body ink
 * from bridge-portfolio.css and must not be touched here.
 *
 * ── 1. THE MAIN NAV ────────────────────────────────────────────────────
 *
 * .nav-link reads --bs-nav-link-color, which .navbar-nav takes from
 * --bs-navbar-color, which style.css:5075 sets to --bs-gray-600. In light that
 * is #606261, the same washed grey the body copy used to be:
 *
 *   light   #606261 on #ffffff     6.15:1
 *   dark    #ffffffd9 on #111417  13.45:1
 *
 * So this is a light-mode problem only, and dark is deliberately left alone.
 * Measure the nav AFTER the theme settles: .nav-link carries
 * `transition: color .15s`, so a computed-style read in the same task as the
 * attribute flip returns the previous mode's colour.
 *
 * ── 2. THE EYEBROW ─────────────────────────────────────────────────────
 *
 * Ten interiors label the H1 with
 * `bg-primary bg-opacity-10 text-primary rounded small px-3 py-2`: the brand
 * green on a 10% wash of itself, at weight 400.
 *
 *   light   #09b850 on #e6f8ed   2.38:1
 *   dark    #09b850 on #10241c   6.18:1
 *
 * 2.38:1 is not a label, it is a suggestion of one. The other eight interiors
 * had already solved this in their own CSS (.aios-eyebrow-pill,
 * .cf-eyebrow-pill and friends): weight 600, a pill radius, a soft tint, and
 * conformly adds a hairline of the accent. This gives the shared pill the same
 * treatment so all 18 interiors read as one component.
 *
 * The ink is derived by holding the brand hue (OKLCH H 148.9) and moving L,
 * reducing chroma ONLY as far as the sRGB gamut demands. Forcing 6:1 at fixed
 * chroma clips to #006c00, a pure green that is no longer the brand; the
 * gamut-mapped solve keeps the hue and lands at C 0.136 instead of 0.192.
 *
 *   light   #00722e   5.52:1 on the tint, 6.09:1 on the page
 *   dark    #3ad066   8.05:1 on the tint, chroma intact at 0.193
 *
 * .text-primary and .bg-primary are !important utilities, so the overrides
 * have to be too.
 */

/* ── nav ─────────────────────────────────────────────────────────────── */
/* (0,2,1), over style.css's .navbar / .navbar-nav / .nav at (0,1,0). */
html:root[data-bs-theme="light"] .navbar {
    /* #606261 6.15:1 -> 9.03:1, L 0.494 -> 0.405, hue and chroma held */
    --bs-navbar-color: #484949;
}
html:root[data-bs-theme="light"] .navbar-nav {
    --bs-nav-link-color: #484949;
}

/* ── eyebrow ─────────────────────────────────────────────────────────── */
:where(html:root) .bg-primary.bg-opacity-10.text-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* style.css sets `small, .small { font-size: .875em !important }` */
    font-size: .82rem !important;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .38rem .9rem !important;
    border-radius: 100px !important;
    border: 1px solid transparent;
}

html:root[data-bs-theme="light"] .bg-primary.bg-opacity-10.text-primary {
    color: #00722e !important;
    background-color: rgba(9, 184, 80, .12) !important;
    border-color: rgba(9, 184, 80, .38);
}

html:root[data-bs-theme="dark"] .bg-primary.bg-opacity-10.text-primary {
    color: #3ad066 !important;
    background-color: rgba(9, 184, 80, .14) !important;
    border-color: rgba(9, 184, 80, .34);
}

/* ── the eight interiors that label the H1 with their own pill ─────────
 *
 * Five of them wrote the pill before the shared one was fixed, and sat below
 * the level it now holds. Same derivation, same targets: hue held, L moved,
 * chroma reduced only where the gamut demands it.
 *
 * These lift the PILL ONLY, not the page's accent token. --cf-blocker and
 * friends also paint headings, links and figure chrome on their own pages,
 * and those uses were not the complaint.
 *
 *   conformly   light 4.00 -> 5.40   dark 5.47 -> 7.52
 *   discovery   light 4.98 -> 5.43   dark 6.93 -> 7.55
 *   figma       light 5.31 -> 5.45   dark 6.25 -> 7.56
 *   content     light 4.67 -> 5.41   dark 6.90 -> 7.53
 *   ai op model light 6.27, already there, dark 6.35 -> 7.52
 *
 * design-systems/kinetic keeps its own .eyebrow at 4.38:1. It runs a complete
 * token layer of its own (see README), the class name is bare enough that a
 * rule here would also reach criterion's unrelated .eyebrow, and at 12px/600
 * it clears AA. Left to that page.
 */
html:root[data-bs-theme="light"] .cf-eyebrow-pill   { color: #bf1910; border-color: #bf1910; }
html:root[data-bs-theme="dark"]  .cf-eyebrow-pill   { color: #ff9a8b; border-color: #ff9a8b; }

html:root[data-bs-theme="light"] .dts-eyebrow-pill  { color: #006981; }
html:root[data-bs-theme="dark"]  .dts-eyebrow-pill  { color: #45c8e5; }

html:root[data-bs-theme="light"] .fos-eyebrow-pill  { color: #2155d4; }
html:root[data-bs-theme="dark"]  .fos-eyebrow-pill  { color: #93b7ff; }

html:root[data-bs-theme="light"] .ics-eyebrow-pill  { color: #8d5500; }
html:root[data-bs-theme="dark"]  .ics-eyebrow-pill  { color: #f0aa46; }

html:root[data-bs-theme="dark"]  .aios-eyebrow-pill { color: #c2aeff; }

/* ── the small uppercase label idiom ───────────────────────────────────
 *
 * Twenty-odd classes across the portfolio share one label idiom: 10.9 to
 * 12.5px, weight 600 or 700, uppercase, wide tracking. Most read well. Four
 * were painting it in a raw accent over a light ground and fell out of the
 * band, badly in light mode:
 *
 *   .cf-kicker          #09b850 on #ffffff   2.63:1   9 uses
 *   .cf-proof-lbl       #09b850 on #e6f8ed   2.38:1   2 uses
 *   .cs-block__eyebrow  #09b850 on #ffffff   2.63:1   8 uses
 *   .qr-lbl             #5a727c on #e2f1f2   4.38:1   8 uses
 *
 * Lifted to 5.5:1, the band the H1 eyebrows now hold, by the same derivation:
 * hue held, L moved, chroma reduced only as far as the sRGB gamut demands.
 * Dark mode is already 7 to 12.7:1 for all four and is left alone.
 *
 * As with the eyebrow pills, these lift the LABEL only. --cf-accent and
 * --bs-primary also paint headings, links and figure chrome on their pages.
 *
 * design-systems/kinetic's `.eyebrow` is the fifth, at 4.38:1 in both modes,
 * and is not here for the same reason as before: the class name is bare enough
 * that a rule in this shared file would also reach criterion's unrelated
 * `.eyebrow`. It is fixed in that page's own stylesheet.
 */
html:root[data-bs-theme="light"] .cf-kicker         { color: #007932; }
html:root[data-bs-theme="light"] .cf-proof-lbl      { color: #00722e; }
html:root[data-bs-theme="light"] .cs-block__eyebrow { color: #007932; }
html:root[data-bs-theme="light"] .qr-lbl            { color: #4b626c; }