/* =====================================================================
   VARIANT: New Castle — "Night Response"
   ---------------------------------------------------------------------
   Direction: dark-surface, high-contrast, 24-hour emergency feel. Deep
   navy-charcoal page, bright cyan-lean brand accent, sharp geometric
   sans display. Boldest of the three; strongest urgency signal.

   Load AFTER tokens.css, BEFORE base.css.

   NOTE: this variant flips the page to a dark surface, so it remaps the
   semantic aliases rather than just the ramps. Contrast for body text on
   --c-bg and for --c-action-ink on --c-action both clear WCAG AA.
   ===================================================================== */

:root {
  /* Brand: bright steel-cyan */
  --brand-050: #16202b;   /* on a dark page the "050" slot is a raised surface */
  --brand-100: #1e2c3a;
  --brand-300: #6fc3d9;
  --brand-500: #35a3c4;
  --brand-700: #1d7b98;
  --brand-900: #0a141c;

  /* Urgent: hot amber — reads loudly on the dark ground */
  --urgent-100: #3a2410;
  --urgent-500: #e0761c;
  --urgent-600: #c96313;
  --urgent-700: #a44d0c;

  --ink-900: #f2f6f9;     /* inverted: "ink" is now the light text */
  --ink-700: #cfd9e2;
  --ink-500: #9aa9b7;
  --ink-300: #5d6d7c;
  --ink-150: #2a3744;
  --ink-075: #1b2531;
  --paper: #0e1720;
  --paper-alt: #141f2a;

  /* Semantic remap for the dark surface */
  --c-text:        var(--ink-900);
  --c-text-muted:  var(--ink-500);
  --c-text-invert: #0e1720;
  --c-bg:          var(--paper);
  --c-bg-alt:      var(--paper-alt);
  --c-bg-deep:     #070e15;
  --c-rule:        var(--ink-150);
  --c-link:        var(--brand-300);
  --c-link-hover:  #9adcee;
  --c-accent:      var(--brand-500);
  --c-accent-soft: var(--brand-100);
  --c-action:      var(--urgent-500);
  --c-action-hover:var(--urgent-600);
  --c-action-ink:  #14100a;   /* dark ink on hot amber: AA-safe */
  --c-focus:       var(--brand-300);

  /* Type: geometric sans display, neutral sans body */
  --font-display: "Barlow Condensed", "Oswald", "Franklin Gothic Medium", Impact, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);
  --fw-display: 700;
  --tracking-display: 0.01em;

  /* Form: flat, squared, no soft shadows (they vanish on dark anyway) */
  --radius-sm: 0px;
  --radius: 2px;
  --radius-lg: 2px;
  --btn-radius: 2px;
  --btn-transform: uppercase;
  --btn-tracking: 0.09em;
  --brand-mark-radius: 2px;
  --card-radius: 2px;
  --card-border: 1px solid var(--ink-150);
  --card-shadow: none;

  --section-y: clamp(2.75rem, 1.8rem + 4vw, 4.75rem);
  --wrap: 1180px;

  /* Hero: near-black wash so the amber CTA carries the page */
  --hero-overlay: linear-gradient(180deg, rgba(7,14,21,0.60) 0%, rgba(7,14,21,0.88) 100%);
  --callpanel-bg: var(--brand-100);

  /* Faint scanline grid */
  --surface-texture:
    repeating-linear-gradient(0deg, rgba(53,163,196,0.035) 0 1px, transparent 1px 6px);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow: 0 8px 22px -12px rgba(0,0,0,0.8);
  --shadow-lg: 0 24px 60px -30px rgba(0,0,0,0.9);
}

/* New Castle hooks — the dark surface needs a few component adjustments. */

/* Header sits on the deep surface with a bright bottom rule. */
.site-header {
  --header-bg: #0a141c;
  border-bottom: 1px solid var(--brand-700);
}

/* Section alternation is by tone, not by lightness. */
.section--alt { background: var(--c-bg-alt); }
.section--deep { background: #070e15; }

/* Placeholder frames need a lighter dash to be visible on dark. */
.ph {
  border-color: var(--ink-300);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 12px, transparent 12px 24px),
    var(--c-bg-alt);
}
.ph__label strong { color: var(--ink-700); }

/* Inline text placeholder: invert so it stays legible on dark. */
.ph-text { background: var(--urgent-100); border-bottom-color: var(--urgent-500); color: var(--ink-900); }

/* Footer merges with the page; a bright top rule keeps the edge. */
.site-footer { --footer-bg: #070e15; border-top: 1px solid var(--brand-700); }

/* Mobile call bar picks up the dark surface. */
.callbar { background: #0a141c; border-top-color: var(--brand-700); }

/* Steps get an accent numeral on a slab rule. */
.steps li { border-top-width: 2px; border-top-color: var(--brand-700); }
.steps li::before { color: var(--c-action); }

/* Hero ink stays light even though this variant inverts the page semantics. */
.hero { --hero-ink: #f2f6f9; --hero-ink-soft: rgba(242,246,249,0.86); }
.hero .eyebrow { color: var(--brand-300); }

/* The supplied New Castle mark has a white field. Give it a crisp, high-contrast frame on the dark header without changing the source art. */
.brand--logo-only {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #9adcee;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.brand--logo-only img {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(200px, 46vw);
  object-fit: contain;
}
@media (max-width: 700px) {
  .brand--logo-only { min-height: 40px; padding: 3px 6px; }
  .brand--logo-only img { height: 32px; max-width: 48vw; }
}

/* Confirmed business details are content, never placeholders. Use the light/cyan Night Response palette to retain clear contrast in every responsive context. */
.business-name {
  color: var(--brand-300);
  font-family: var(--font-display);
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.25;
}
.rail__box .business-name { color: var(--ink-900); font-size: 1.1rem; }
.site-footer h3 .business-name {
  color: #ffffff;
  font-size: clamp(1.25rem, 1.05rem + .45vw, 1.55rem);
  font-weight: 700;
}
.site-footer__bar .business-name { color: #ffffff; font-size: 1rem; font-weight: 700; }
@media (max-width: 619px) {
  .rail__box .business-name { font-size: 1.05rem; }
  .site-footer h3 .business-name { font-size: 1.25rem; }
}