/* ============================================================================
   CONCEPT: BLUEPRINT — Ink & Grid
   ============================================================================
   The main page becomes a contractor's drafting sheet: deep cyanotype-blue
   ground, a faint graph-paper grid running under every section, hairline
   borders and corner crop-marks instead of soft drop shadows, and monospace
   technical labels on phone numbers, tags and section eyebrows. One accent —
   a copper/amber "drafting pencil" hue — marks the things that matter (labels,
   icons, call-to-action fills) and nowhere else, so it keeps its weight.
   A viewer should feel precision and confidence: these people measure twice,
   write it down, and the number they give you was drawn, not guessed.

   Scope: every rule below lives under [data-design="blueprint"], applied to
   <html>. Nothing here reaches a page without that attribute.

   CONTRAST TARGETS (checked against sRGB relative luminance, WCAG formula):
     - Body text on page ground (#eaf2fb / #aac3dc on #071d33, #0a2540, #0f3057)
       -> ~13.6:1, ~8.5:1, ~7.3:1 — all comfortably over the 4.5:1 floor.
     - Faint/caption text (#7ea0c4) on darkest grounds -> ~5.6–7.5:1.
     - Accent-as-text (#d98a2b / #e8a34a) on the ink/navy/panel grounds used
       on this page -> ~5.4–6.4:1 (small labels), well over 4.5:1.
     - Paper text (#eaf2fb) on the accent-fill buttons (#9c4f18 copper,
       #7a3d13 on hover) -> ~5.2:1 / ~7.4:1 — the bright accent itself is
       NEVER used as a fill behind paper text (it only reaches ~2.2:1 there),
       which is why fills use the darker copper instead. See the explicit
       overrides near the bottom for every place that distinction mattered.
   ============================================================================ */

/* PALETTE
   --bp-ink            #071d33  deepest ground — page base, steps/services sections
   --bp-ink-2          #0a2540  section ground — hero / why / hiring gradients
   --bp-panel          #0f3057  card surface — "the sheet": tiles, step cards, chat panel
   --bp-panel-2        #123356  secondary panel — chips, step-num/step-meta badges
   --bp-paper          #eaf2fb  primary text — ink-on-paper white-blue
   --bp-paper-dim      #aac3dc  secondary/body-muted text
   --bp-paper-faint    #7ea0c4  tertiary/caption text
   --bp-accent         #d98a2b  drafting copper — labels, icons, key numbers (text use)
   --bp-accent-bright  #e8a34a  lighter accent — headline emphasis, tinted-panel text
   --bp-accent-fill    #9c4f18  dark copper — CTA / button fills (paired with paper text)
   --bp-accent-fill-h  #7a3d13  dark copper, hover state
   --bp-line           hairline borders/dividers (rgba paper @ 16–22%)
   --bp-grid-minor/-major   graph-paper grid lines (rgba paper @ 4.5% / 9%)
   --bp-success        #22c55e  checklist green, brightened for the dark ground
*/

html[data-design="blueprint"] {
  --bp-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --bp-ink: #071d33;
  --bp-ink-2: #0a2540;
  --bp-panel: #0f3057;
  --bp-panel-2: #123356;
  --bp-paper: #eaf2fb;
  --bp-paper-dim: #b5cbe0;   /* P18: was #aac3dc (5.2-6.7:1 under the 11-13 px why-card and sub-line text); 7.2:1 on the card panel */
  --bp-paper-faint: #7ea0c4;
  --bp-accent: #d98a2b;
  --bp-accent-bright: var(--bp-accent);   /* was #e8a34a, a third copper; one accent now */
  --bp-accent-hover: color-mix(in srgb, var(--bp-accent) 82%, #ffffff);   /* a STATE of the accent, not a second one */
  /* ONE accent (Joseph, 2026-09-21: "two accent colors in the main page ... I prefer the one used for icons,
     get rid of the second one"). The dark copper fill is gone: fills use the icon copper, and text on a
     copper fill is ink, not paper (paper on #d98a2b is 2.5:1; ink is 6.4:1). */
  --bp-accent-fill: var(--bp-accent);
  --bp-accent-fill-h: var(--bp-accent-hover);
  --bp-on-accent: var(--bp-ink);
  --bp-line: rgba(234, 242, 251, 0.16);
  --bp-line-soft: rgba(234, 242, 251, 0.09);
  /* Tunable from the visual settings panel. Defaults are the original values. */
  --bp-grid-size: 24px;        /* one small square */
  --bp-grid-strength: 1;       /* multiplies both grid line alphas */
  --bp-hairline: 1px;          /* border weight through the whole design */
  --bp-radius: 4px;            /* corner radius through the whole design */
  --bp-grid-minor: rgba(234, 242, 251, calc(0.045 * var(--bp-grid-strength)));
  --bp-grid-major: rgba(234, 242, 251, calc(0.09 * var(--bp-grid-strength)));
  --bp-success: #22c55e;

  /* ---- Re-point the site's own tokens so everything built on them follows ---- */
  --mnm-bg: var(--bp-ink);
  --mnm-bg-2: rgba(234, 242, 251, 0.12);
  --mnm-bg-red: rgba(217, 138, 43, 0.12);
  --mnm-bg-slate-dark-4: rgba(7, 29, 51, 0.93);
  --mnm-bg-slate-dark-5: #030d1a;
  --mnm-bg-slate-dark-6: rgba(7, 29, 51, 0.5);
  --mnm-bg-white: rgba(234, 242, 251, 0.08);
  --mnm-bg-white-2: rgba(234, 242, 251, 0.14);
  --mnm-bg-white-3: rgba(234, 242, 251, 0.05);
  --mnm-bg-white-6: rgba(234, 242, 251, 0.09);
  --mnm-brand-2-fill: var(--bp-accent-fill-h);
  --mnm-brand-4: rgba(217, 138, 43, 0.35);
  --mnm-brand-5: rgba(217, 138, 43, 0.45);
  --mnm-brand-7: rgba(234, 242, 251, 0.85);
  --mnm-brand-ink: var(--bp-paper);
  --mnm-danger: var(--bp-accent);
  --mnm-danger-3: var(--bp-panel-2);
  --mnm-danger-3-b: rgba(217, 138, 43, 0.16);
  --mnm-danger-4: rgba(217, 138, 43, 0.45);
  --mnm-accent: var(--bp-accent);             /* SG-4: the main page's accent is its copper */
  --mnm-accent-soft: var(--bp-panel-2);
  --mnm-accent-soft-2: rgba(217, 138, 43, 0.16);
  --mnm-accent-line: rgba(217, 138, 43, 0.45);
  --mnm-danger-4-text: var(--bp-accent-bright);
  --mnm-danger-6-fill: rgba(217, 138, 43, 0.1);
  --mnm-danger-7: var(--bp-accent-fill-h);
  --mnm-faint: var(--bp-paper-faint);
  --mnm-ink: var(--bp-paper);
  --mnm-ink-2: var(--bp-ink-2);
  --mnm-ink-2-b: var(--bp-ink);
  --mnm-ink-5: var(--bp-accent-bright);
  --mnm-accent-on-dark: var(--bp-accent-bright);
  --mnm-line: var(--bp-line);
  --mnm-line-2: rgba(234, 242, 251, 0.22);
  --mnm-line-2-text: var(--bp-paper-dim);
  --mnm-line-white: rgba(234, 242, 251, 0.14);
  --mnm-muted: var(--bp-paper-dim);
  --mnm-muted-2: var(--bp-paper-dim);
  --mnm-muted-ondark: var(--bp-paper-dim);         /* P18: the on-dark set in blueprint paper (tokens.css's are slate) */
  --mnm-muted-2-ondark: var(--bp-paper-dim);
  --mnm-text-ondark: var(--bp-paper);
  --mnm-faint-ondark: var(--bp-paper-faint);
  /* P18: small copper text (section labels, "Get a quote" lines) at 7:1 -- the ONE copper, lightened toward the paper
     (a tint of the accent, not a second accent; 7.4:1 on the card panel, 8.6:1 on the section ground). */
  --bp-accent-text: color-mix(in srgb, var(--bp-accent) 55%, var(--bp-paper));
  --mnm-footer-dark-text: var(--bp-paper-dim);      /* the one site footer (P18): as before, text and links paper-dim */
  --mnm-footer-dark-link: var(--bp-paper-dim);
  --mnm-footer-dark-strong: var(--bp-paper-faint);
  --mnm-footer-dark-hover: var(--bp-paper);
  --mnm-navy: var(--bp-ink-2);
  --mnm-shade-red-2: rgba(217, 138, 43, 0.25);
  --mnm-shade-red-4: rgba(217, 138, 43, 0.5);
  --mnm-success: var(--bp-success);
  --mnm-success-5: var(--bp-success);
  --mnm-success-fill: var(--bp-success);
  --mnm-surface: var(--bp-panel);
  --mnm-text: var(--bp-paper-dim);
  --mnm-warning-2: var(--bp-paper-dim);
  --mnm-warning-3: rgba(217, 138, 43, 0.07);
  --mnm-warning-5: var(--bp-accent);

  /* ---- Square the corners: drawn, measured, not soft-app-UI-round ---- */
  /* Radius re-judge (2026-09-23): repoints the six ROLE tokens now, not the retired value-named ones (this
     block used to read --mnm-radius-10px/-14px/-16px/-4px/-6px/-sm/-pill/bare --mnm-radius; every one of
     those still-live corners now reads a role token instead, classified by tools/families/radius/roles.py,
     so the squaring has to repoint by role to keep reaching them). Checked against the pre-swap tree
     (before/after pixel diff, `/` at 1280x900 and 390x844): every corner that already resolved to control's
     or pill's canonical value keeps the exact same squared pixel (3px); container gains ONE real pixel
     (3px -> 4px) on the handful of corners the classifier now correctly reads as containers (.tile,
     .step-card, .step-num, .resume-callout -- the last two never render on the main page) -- this is not a
     drift, this file's OWN comments on those rules already said "repoints --mnm-radius to 4px" while the
     line below actually squared to 3px; the role rewrite is what makes the code match the comment.
     --mnm-radius-full is left alone on purpose — it draws true circles (avatars, dots). */
  --mnm-radius-0: 0;
  --mnm-radius-small: 2px;
  --mnm-radius-control: 3px;
  --mnm-radius-container: 4px;
  --mnm-radius-pill: 3px;
}

/* ---- Base ground ---- */
html[data-design="blueprint"] body {
  background: var(--bp-ink);
}

/* ---- Graph-paper ground: two-scale grid, CSS gradients only ---- */
html[data-design="blueprint"] .hero,
html[data-design="blueprint"] .steps-section,
html[data-design="blueprint"] .services-cards-section,
html[data-design="blueprint"] .why-section,
html[data-design="blueprint"] .hiring-section,
html[data-design="blueprint"] footer {
  background-image:
    linear-gradient(var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-major) 1px, transparent 1px),
    linear-gradient(var(--bp-grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-minor) 1px, transparent 1px);
  background-size: calc(var(--bp-grid-size) * 5) calc(var(--bp-grid-size) * 5),
                   calc(var(--bp-grid-size) * 5) calc(var(--bp-grid-size) * 5),
                   var(--bp-grid-size) var(--bp-grid-size),
                   var(--bp-grid-size) var(--bp-grid-size);
  background-position: -1px -1px;
}
/* Hero already owns ::before for the (hidden) brick pattern — give the grid its own layer. */
html[data-design="blueprint"] .hero {
  position: relative;
}
/* The hero map is absolutely positioned and must stay that way; this rule was flattening it to
   a zero-size relative box, so the map vanished on any page using this design. */
html[data-design="blueprint"] .hero > *:not(.hero-up-map) {
  position: relative;
  z-index: 1;
}

/* ---- Technical type: monospace on labels, tags, and every phone number ---- */
html[data-design="blueprint"] .section-label,
html[data-design="blueprint"] .step-meta,
html[data-design="blueprint"] .tile .go,
html[data-design="blueprint"] .hero-sub,
html[data-design="blueprint"] footer .site-footer-note {
  font-family: var(--bp-mono);
}
html[data-design="blueprint"] .section-label {
  letter-spacing: 2px;
}
html[data-design="blueprint"] .section-label,
html[data-design="blueprint"] .tile .go {
  color: var(--bp-accent-text);   /* P18: 11-13 px copper text, 7:1 */
}
html[data-design="blueprint"] a[href^="tel:"] {
  font-family: var(--bp-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Hairlines instead of soft shadows ---- */
html[data-design="blueprint"] footer {
  border-top: 1px solid var(--bp-line);
}
html[data-design="blueprint"] .tile,
html[data-design="blueprint"] .step-card,
html[data-design="blueprint"] .why-card {
  box-shadow: none;
  position: relative;
}
html[data-design="blueprint"] .step-card:hover,
html[data-design="blueprint"] .why-card:hover {
  border-color: var(--bp-accent);
}

/* ---- Corner crop-marks on every card, like a drafting sheet ---- */
html[data-design="blueprint"] .tile::before,
html[data-design="blueprint"] .step-card::before,
html[data-design="blueprint"] .why-card::before,
html[data-design="blueprint"] .tile::after,
html[data-design="blueprint"] .step-card::after,
html[data-design="blueprint"] .why-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.6;
  pointer-events: none;
}
html[data-design="blueprint"] .tile::before,
html[data-design="blueprint"] .step-card::before,
html[data-design="blueprint"] .why-card::before {
  top: 6px;
  left: 6px;
  border-top: 1.5px solid var(--bp-accent);
  border-left: 1.5px solid var(--bp-accent);
}
html[data-design="blueprint"] .tile::after,
html[data-design="blueprint"] .step-card::after,
html[data-design="blueprint"] .why-card::after {
  bottom: 6px;
  right: 6px;
  border-bottom: 1.5px solid var(--bp-accent);
  border-right: 1.5px solid var(--bp-accent);
}

/* ---- Ruler tick under every section title ---- */
html[data-design="blueprint"] .section-title {
  position: relative;
  padding-bottom: 16px;
}
html[data-design="blueprint"] .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72px;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--bp-accent) 0 6px,
    transparent 6px 10px
  );
}

/* ---- Selection / focus in the house accent ---- */
html[data-design="blueprint"] ::selection {
  background: var(--bp-accent);
  color: var(--bp-ink);
}

/* ============================================================================
   Explicit, literal overrides — only where a single token could not serve two
   opposite jobs at once (bright accent used as TEXT needs a light-on-dark
   ground; the same hue used as a BUTTON FILL needs to be dark enough for
   paper text on top). Rather than fight that with one token, these components
   get their own accent-fill colors directly, per hard rule #2's carve-out.
   ============================================================================ */
html[data-design="blueprint"] .topnav-cta,
html[data-design="blueprint"] .hero-cta,
html[data-design="blueprint"] .btn-hiring,
html[data-design="blueprint"] #mnmChatLauncher {
  background: var(--bp-accent-fill);
  color: var(--bp-on-accent);
}
html[data-design="blueprint"] .topnav-cta:hover,
html[data-design="blueprint"] .hero-cta:hover,
html[data-design="blueprint"] .btn-hiring:hover,
html[data-design="blueprint"] #mnmChatLauncher:hover {
  background: var(--bp-accent-fill-h);
  color: var(--bp-on-accent);
}
html[data-design="blueprint"] .cta-strip {
  background: var(--bp-accent-fill);
}
html[data-design="blueprint"] .cta-strip,
html[data-design="blueprint"] .cta-strip h2,
html[data-design="blueprint"] .cta-strip p {
  color: var(--bp-on-accent);
}
html[data-design="blueprint"] .cta-strip .btn-light {
  background: var(--bp-on-accent);
  color: var(--bp-accent);
  border: none;
}
html[data-design="blueprint"] .rc-icon,
html[data-design="blueprint"] .rc-btn {
  background: var(--bp-accent-fill);
  color: var(--bp-on-accent);
}
html[data-design="blueprint"] .rc-btn:hover {
  background: var(--bp-accent-fill-h);
}
html[data-design="blueprint"] .why-card p {
  color: var(--bp-paper-dim);
}
/* P18 (report 93): the why cards become solid sheets like the tiles and step cards. Translucent, the graph grid's
   major lines ran under their 13 px text and took it to 5.7:1 (a dim tone cannot clear 7:1 over a grid line). */
html[data-design="blueprint"] .why-card {
  background: var(--bp-panel);
}

/* ---- 390px check: no widths/paddings changed, grid is a background image
   only, so nothing here introduces horizontal scroll. Corner marks sit
   inside existing card padding, not outside the box. ---- */