/* ==========================================================================
   Tri-Star Seamless Gutters — design tokens
   Locked by Tri-Star-Claude-Vibe-and-Design-Sheet.docx (23 Oct 2026).
   Direction B "Stage & Float" selected 3 Nov 2026.
   Do not introduce colours or faces outside this file.
   ========================================================================== */

:root {
  /* ---- brand ---- */
  --red:        #C8102E;   /* primary CTA, selected state, accent rules */
  --red-dark:   #A60D26;   /* CTA hover */
  --red-a11y:   #B00E28;   /* red on white where 4.5:1 text contrast is needed */
  --blue:       #003DA5;   /* feature bands, nav emphasis, focus ring */
  --navy:       #0B1F3A;   /* hero overlay, footer, dark sections */

  /* ---- functional, not brand ----
     Added 4 Nov 2026 for the Google review stars. A gold star is a near-universal
     UI convention and reads as a rating; the brand red would read as an alert.
     It is registered here because the vibe sheet's rule is that every colour on
     the site lives in this file. Do not use it for anything except star ratings. */
  --star:       #F2A93B;

  /* ---- surfaces ---- */
  --white:      #FFFFFF;
  --off-white:  #F4F7FB;
  --border:     #D8E1EC;

  /* ---- text ---- */
  --ink:        #17212F;
  --slate:      #526173;
  --on-dark:          #FFFFFF;
  --on-dark-muted:    #C7D5E7;
  --on-dark-eyebrow:  #8FB3E4;

  /* ---- type ---- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- layout ----
     --wrap widened 1240 -> 1360 on 4 Nov 2026 (operator: headings were stacking
     onto too many lines). Paragraph measure is NOT allowed to widen with it:
     every block of running text carries its own ch-based cap so the extra width
     goes to headings and grids, never to line length. */
  --wrap:        1360px;
  /* Comfortable measure for running text inside a now-wider container. */
  --measure:     64ch;
  --gutter:      20px;
  --radius-card: 8px;
  --radius-btn:  5px;

  /* ---- section rhythm (mobile first) ---- */
  --sec-y:   48px;
  --card-pad: 24px;

  /* ---- elevation ---- */
  --shadow-card:  0 1px 2px rgba(11,31,58,.05), 0 2px 8px rgba(11,31,58,.06);
  --shadow-float: 0 18px 44px rgba(11,31,58,.26);
}

@media (min-width: 720px) {
  :root { --gutter: 40px; --sec-y: 72px; --card-pad: 28px; }
}

@media (min-width: 1080px) {
  :root { --gutter: 44px; --sec-y: 96px; --card-pad: 32px; }
}