/* ==========================================================================
   FabFlow — "Industrial Instrument" for the static pages
   Palette roles are already baked into each page's own <style> block by the
   token pass; this sheet supplies the shared identity layer that the
   hand-written pages never had: the type voices, tabular figures, the
   engineered radius floor, and the browser surfaces.
   ========================================================================== */

:root {
  --ii-ground: #F4F6F8;
  --ii-surface: #FFFFFF;
  --ii-ink: #171A1F;
  --ii-ink-2: #3D444D;
  --ii-ink-3: #4A525B;
  --ii-ink-4: #5C6673;
  --ii-line: #DCE0E5;
  --ii-line-strong: #C3CBD3;
  --ii-accent: #1F5FD0;
  --ii-accent-deep: #16408F;
  --ii-ok: #0F6B48;
  --ii-bad: #B02B24;
  --ii-head: "Barlow Semi Condensed", "Inter Tight", system-ui, sans-serif;
  --ii-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ii-body) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--ii-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* headings: semi-condensed industrial grotesque, tight */
h1, h2, h3, h4, h5, h6,
.page-header h1, .hero h1, .article-header h1, .article-body h2, .article-body h3,
.section-title, .cta-section h2, .cta-box h2, .content h2, .plan h3, .card h3,
.stat-card .stat-num, .fact-card .fact-num, .number-card .num, .result-savings {
  font-family: var(--ii-head) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h1, .page-header h1, .hero h1, .article-header h1 { font-weight: 900; letter-spacing: -0.022em; }
h2, h3, .content h2, .cta-section h2 { font-weight: 700; letter-spacing: -0.012em; }

/* eyebrow-ish labels stay labels, but they are never a pill above a heading */
.section-label, .article-tag, .badge { letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

/* the radius floor: nothing bubbly, nothing 14px */
[class] { --ii-r: 6px; }
.card, .feature-card, .stat-card, .info-card, .cta-card, .cta-box, .cta-section,
.cta-banner, .mission-box, .testimonial-card, .article-card, .form-card,
.comparison-table, .comparison-wrap, .callout, .cost-box, .decision-step,
.results-card, .sidebar-card, .plan, .step, .article-hero, .blog-hero, .cover {
  border-radius: 6px;
}
.cta-btn, .cta-button, .nav-cta, .hero-cta a, button, input, select, textarea,
.article-tag, .badge, .pill, .tag, code, pre, .hero-badge, .fabflow {
  border-radius: 4px;
}

/* crisp rules, not ghosted ones */
.nav, .site-header, .site-footer, .footer { border-color: var(--ii-line) !important; }

/* accent + links */
a { color: var(--ii-accent); }
a:hover { color: var(--ii-accent-deep); }

/* readability floors for the small print that carries meaning */
.subtitle, .article-meta, .post-meta, .breadcrumb, .copyright, .footer-links a,
.testimonial-author, .fact-card p, .card p, .decision-step p {
  color: var(--ii-ink-3);
}

/* --- the parts you did not draw still carry the system ------------------- */
::selection { background: rgba(31, 95, 208, 0.22); color: var(--ii-ink); }

* {
  caret-color: var(--ii-accent);
  scrollbar-color: var(--ii-line-strong) var(--ii-ground);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ii-ground); }
*::-webkit-scrollbar-thumb {
  background: var(--ii-line-strong);
  border: 2px solid var(--ii-ground);
  border-radius: 5px;
}
*::-webkit-scrollbar-thumb:hover { background: #99A3AD; }

:focus-visible { outline: 2px solid var(--ii-accent); outline-offset: 2px; }

/* the nav wordmark and icon read flat and machined */
.nav-logo .icon, .site-header .logo-mark, .fabflow {
  background-image: none !important;
  background-color: var(--ii-accent) !important;
  color: #FFFFFF !important;
}

/* card icon slots now hold authored SVG, not emoji */
.info-card .card-icon { display: flex; align-items: center; color: var(--ii-accent); }
.info-card .card-icon svg { width: 28px; height: 28px; }
h3 > svg { display: inline-block; vertical-align: -4px; margin-right: 8px; width: 22px; height: 22px; color: var(--ii-accent); }

/* --------------------------------------------------------------------------
   Structural fixes the token pass cannot see: variable-built accent fields,
   gradient text treatments, the wordmark, and the secondary-text floor.
   -------------------------------------------------------------------------- */

/* any "gradient" treatment becomes a flat machined-blue mark, never gradient text */
[class*="gradient"] {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
.gradient { color: var(--ii-accent) !important; }

/* the wordmark reads as ink on the light chrome ... */
.nav-logo, .nav-logo span:not(.icon):not(.mark), .site-header .logo,
.nav-logo .logo-text { color: var(--ii-ink) !important; }
/* ... and the mark itself is a solid machined-blue plate with a white glyph */
.nav-logo .icon, .nav-logo .mark, .logo-icon, .logo-mark, .fabflow-icon {
  background-image: none !important;
  background-color: var(--ii-accent) !important;
  color: #FFFFFF !important;
}

/* labels painted on an accent field carry white, whatever built the field */
.cta-btn, .cta-button, .nav-cta, .badge, .btn-primary, .btn-cta,
.cta-strip a, .hero-cta a, .link-btn, .plan .plan-btn, .plan.featured .badge {
  color: #FFFFFF !important;
}

/* secondary text floored at 4.5:1 on every ground used here */
.breadcrumb, .breadcrumb a, .breadcrumb span, .nav-links a, .stat-label, .label,
.subtitle, .tagline, .post-meta, .article-meta, .copyright, .note, .hint,
.site-footer .footer-links a, .sidebar-card p, .number-card .label, .muted, .dim,
.article-meta span, .card-label, .caption {
  color: var(--ii-ink-3) !important;
}

/* --------------------------------------------------------------------------
   Normalisation: one action treatment, one tag treatment, whatever the
   variable names in each hand-written page's own style block happen to be.
   -------------------------------------------------------------------------- */

/* primary actions: one machined-blue plate, white label */
.cta-btn, .cta-button, .nav-cta, .btn-primary, .btn-cta, .hero-cta a,
.cta-strip a, .link-btn, .plan .plan-btn, a[class*="btn"] {
  background-image: linear-gradient(135deg, var(--ii-accent), var(--ii-accent-deep)) !important;
  background-color: var(--ii-accent) !important;
  color: #FFFFFF !important;
}

/* in a nav bar the trailing link is the action */
.nav-links > a:last-child, .nav-inner > *:last-child a, nav .nav-links a:last-child {
  color: #FFFFFF !important;
}

/* the wordmark is ink on the light chrome; the plate belongs to the mark alone */
.nav-logo { background-image: none !important; color: var(--ii-ink) !important; }

/* figures read as measured values, not as decoration */
.number-card .number, .number-card .num, .number-card strong,
.stat-card .stat-num, .stat-num, .result-savings, .fact-card .fact-num {
  color: var(--ii-accent-deep) !important;
  font-variant-numeric: tabular-nums;
}

/* tags sit on a neutral chip, never a tinted one */
.badge, .pill, .tag, .article-tag, .link-tag, .hero-badge, .free-badge {
  background: #E7EBEF !important;
  border: 1px solid var(--ii-line) !important;
  color: var(--ii-ink-2) !important;
}
.badge, .pill, .tag, .article-tag, .link-tag {
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 4px !important;
}
.plan .badge, .plan.featured .badge, .plan.highlighted .badge {
  background: var(--ii-accent) !important;
  border-color: var(--ii-accent) !important;
  color: #FFFFFF !important;
}
.link-tag, .article-tag { color: var(--ii-accent-deep) !important; }

/* captions and flow labels */
.fnode .d, .fnode .t, .fnode .stepnum, .farrow, .lede, .micro, .fine,
.footnote, .disclaimer, .lede-text { color: var(--ii-ink-3) !important; }
.farrow { color: var(--ii-ink-4) !important; font-weight: 600; }

/* eyebrow-scale context labels: flat ink, no pill, no tint */
.eyebrow, .kicker, .pre-title, .overline, .section-eyebrow {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--ii-ink-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Final pass: footers, the nav action's own plate, and the calculator
   readouts. All three were painted for a dark ground and read as ghosts once
   the ground went light.
   -------------------------------------------------------------------------- */

footer, footer p, footer span, footer a, footer div, footer li,
.article-footer, .article-footer *, .footer-note, .site-footer .copyright,
.site-footer p, .footer-links a, .copyright {
  color: var(--ii-ink-3) !important;
}
footer a:hover, .footer-note a:hover { color: var(--ii-accent-deep) !important; }

/* the nav action owns its own plate, not just its label colour */
.nav-links > a:last-child, .nav-inner > *:last-child a, nav .nav-links a:last-child {
  background-color: var(--ii-accent) !important;
  color: #FFFFFF !important;
  padding: 0.5em 1em;
  border-radius: 4px;
}

/* calculator readouts sit on the light ground, not under a dark scrim */
.calc-results { background: rgba(23, 26, 31, 0.04) !important; }
.result-savings { color: var(--ii-ok) !important; }
.savings-label, .big-number, .number-card .number { color: var(--ii-ok) !important; }
.number-card .number.danger, .result-savings.danger { color: var(--ii-bad) !important; }
.number-card .number.warn { color: var(--ii-accent-deep) !important; }

/* the hiring-forecast flow panel was a dark plate */
.flow-wrap { background: #FFFFFF !important; border: 1px solid var(--ii-line) !important; }
.fnode { background: rgba(23, 26, 31, 0.03) !important; border: 1px solid var(--ii-line) !important; }
.fnode .t, .fnode .d, .farrow { color: var(--ii-ink-3) !important; }
.fnode .ico { color: var(--ii-accent) !important; }
.flow-wrap .panel, .flow-wrap h3 { color: var(--ii-ink) !important; }

/* --------------------------------------------------------------------------
   Last mile: the gradient-clipped wordmark and the hiring-forecast report's
   translucent-white-on-dark labels, which invert to invisible once the plate
   under them goes light.
   -------------------------------------------------------------------------- */
.grad, .grad * {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ii-accent) !important;
  color: var(--ii-accent) !important;
}

.flow-wrap, .flow-wrap p, .flow-wrap li, .flow-wrap span, .flow-wrap b,
.flow-wrap strong, .flow-note, .flow-note * {
  color: var(--ii-ink-3) !important;
}
.flow-wrap h2, .flow-wrap h3, .flow-wrap h4, .flow-wrap .t {
  color: var(--ii-ink) !important;
}
.flow-note, .flow-note *, .sub, .l, .panel .sub, .panel .l {
  color: var(--ii-ink-3) !important;
}
.ico, .flow-wrap .ico { color: var(--ii-accent) !important; }