/* ConBRIX brand layer (R3 §0 p7). ONE mapping layer: brand tokens from the
   brand manual's tokens.css (--cbx-*), then the app's existing variables and
   chrome mapped onto them. Page structure and content do not change here —
   only colour, font, logo, name. Loaded AFTER conbic.css so overrides win.
   Fonts are self-hosted (fonts/fontfaces.css, SIL OFL 1.1) — EL rule, CSP
   font-src 'self'. */

/* ---- brand tokens (verbatim from design_handoff tokens.css) ---- */
:root {
  /* Roles */
  --cbx-paper: #f2f2f3;   /* page ground */
  --cbx-ink: #1d1f20;     /* body text, headings, PRIMARY LOGO */
  --cbx-steel: #5980a6;   /* accent: surfaces, icons, charts, accent logo */
  --cbx-deep: #1d2d3d;    /* full-field dark ground, negative logo backdrop */
  --cbx-divider: rgba(29, 31, 32, 0.16);

  /* Steel ramp (OKLCH-derived, single perceptual lightness scale) */
  --cbx-steel-100: #eef6ff;
  --cbx-steel-200: #d6ebff;
  --cbx-steel-300: #b5d9fd;
  --cbx-steel-400: #94bce3;
  --cbx-steel-500: #749dc4;
  --cbx-steel-600: #597ea3;
  --cbx-steel-700: #416180;  /* accent text at body size */
  --cbx-steel-800: #2c455d;
  --cbx-steel-900: #1d2d3d;

  /* Neutral ramp */
  --cbx-neutral-100: #f5f5f8;
  --cbx-neutral-200: #e7e7ea;
  --cbx-neutral-300: #d4d4d7;
  --cbx-neutral-400: #b7b7ba;
  --cbx-neutral-500: #98989b;
  --cbx-neutral-600: #7a7a7d;
  --cbx-neutral-700: #5d5d60;
  --cbx-neutral-800: #424244;
  --cbx-neutral-900: #2b2b2d;

  /* Type */
  --cbx-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --cbx-font-heading-weight: 600;
  --cbx-font-body: "Barlow", system-ui, sans-serif;

  /* Spacing (0.85x density scale) */
  --cbx-space-1: 3.4px;
  --cbx-space-2: 6.8px;
  --cbx-space-3: 10.2px;
  --cbx-space-4: 13.6px;
  --cbx-space-6: 20.4px;
  --cbx-space-8: 27.2px;

  /* Radius - square by intent */
  --cbx-radius-sm: 2px;
  --cbx-radius-md: 4px;
  --cbx-radius-lg: 7px;

  /* Elevation */
  --cbx-shadow-sm: 0 1px 2px rgba(43, 43, 45, 0.14);
  --cbx-shadow-md: 0 3px 10px rgba(43, 43, 45, 0.16);
  --cbx-shadow-lg: 0 12px 32px rgba(43, 43, 45, 0.22);
}

/* ---- mapping layer: existing app variables -> brand tokens ----
   Status colours (--ok/--warn/--amber) stay: the brand palette is
   monochrome by design and adding a warning colour is a product-team
   decision (brand README); the desk marks NEED green/amber/red to be
   readable (T14/VKE readability wins — noted in the R3a report). */
:root {
  --bg: var(--cbx-paper);
  --primary: var(--cbx-steel-700);   /* body-size accent text = step 700 */
  --accent: var(--cbx-steel);
  --ink: var(--cbx-ink);
  --card: #ffffff;
  --line: var(--cbx-neutral-300);
}

body {
  font-family: var(--cbx-font-body), "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--cbx-font-heading);
  font-weight: var(--cbx-font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--cbx-ink);
}

/* Header: deep full-field surface, text/logo turn paper (negative logo). */
header.site { background: var(--cbx-deep); }
header.site a, header.site .logo { color: var(--cbx-paper); }

/* Logo lockup: symbol + gap + wordmark, horizontal (26/21 px pair, gap 9). */
.brand-lockup {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--cbx-paper); text-decoration: none;
}
.brand-lockup svg { width: 26px; height: 26px; display: block; }
.brand-wordmark {
  font-family: var(--cbx-font-heading);
  font-weight: 600; font-size: 21px; line-height: 1;
  letter-spacing: 0.005em;
}
.brand-beta {
  font-family: var(--cbx-font-body); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cbx-steel-300); align-self: flex-start; margin-top: 1px;
}

/* Tagline on login/public pages (brand voice: affirmative, no bangs). */
.brand-tagline { color: var(--cbx-steel-700); font-size: 17px; margin: .2rem 0 1rem; }

/* Side navigation onto the neutral ramp. */
.sidenav { background: var(--cbx-neutral-100); border-right: 1px solid var(--cbx-neutral-200); }
.sidenav a { color: var(--cbx-ink); border-radius: var(--cbx-radius-sm); }
.sidenav a:hover { background: var(--cbx-steel-100); }
.sidenav a.active { background: var(--cbx-steel-700); color: #fff; }

/* Buttons: the only solid object is the primary button - steel fill,
   square corners; focus ring always replaces the browser default. */
button, .btn { border-radius: var(--cbx-radius-md); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cbx-steel); outline-offset: 2px;
}

/* Footer version line. */
footer.site .brand-version { color: var(--cbx-neutral-600); font-size: 12px; }