/* ============================================================
   8Twelve brand layer
   ------------------------------------------------------------
   Values taken from the 8Twelve Mortgage Brand Standards as
   implemented in the 8twelve.mortgage codebase (src/index.css).

     8Twelve Blue    #264283   headlines, primary actions
     8Twelve Gold    #db9247   accent, hover, the one flourish
     8Twelve Grey 1  #696769   body copy
     8Twelve Grey 2  #8d8989   secondary copy
     8Twelve Grey 3  #b9b8bc   hairlines
     8Twelve Orange  #d2a853   secondary pair
     8Twelve Desert  #f7d099   secondary pair, washes
     Footer ink      #07112a

   Typeface: Nunito Sans. Headline ExtraBold (800) at -0.04em
   tracking; subheads Bold (700); body Regular (400).

   Loaded after each page's own <style>, so it wins the cascade.
   This is the only file to edit when the brand moves.
   ============================================================ */

:root{
  /* ---------- brand palette ---------- */
  --b-blue:   #264283;
  --b-gold:   #db9247;
  --b-grey1:  #696769;
  --b-grey2:  #8d8989;
  --b-grey3:  #b9b8bc;
  --b-orange: #d2a853;
  --b-desert: #f7d099;
  --b-ink:    #07112a;

  --b-blue-deep: #1a2f60;
  --b-blue-wash: #EEF1F8;
  --b-gold-wash: #FBEEE0;

  /* ---------- map the app's semantic tokens onto the brand ---------- */
  --ink:       var(--b-blue);    /* headings are Blue per brand standards */
  --ink-2:     var(--b-grey1);   /* body copy is Grey 1 */
  --ink-3:     var(--b-grey2);
  --paper:     #F1F3F7;
  --card:      #FFFFFF;
  --line:      var(--b-grey3);
  --line-soft: #E6E7EB;
  --teal:      var(--b-blue);    /* the app's accent role is Blue here */
  --teal-2:    #3A5CA8;
  --teal-wash: var(--b-blue-wash);

  /* verdict colours keep their meaning, warmed toward the palette */
  --pass:       #1F7A55;
  --pass-wash:  #E2F1EA;
  --fix:        #9A6212;
  --fix-wash:   var(--b-gold-wash);
  --block:      #A32438;
  --block-wash: #FADEE2;

  /* ---------- type ---------- */
  --f-display: 'Nunito Sans', Verdana, sans-serif;
  --f-body:    'Nunito Sans', Verdana, sans-serif;
  --f-mono:    'Nunito Sans', Verdana, sans-serif;
}

body{ font-family:var(--f-body); color:var(--b-grey1) }

h1,h2,h3,h4,h5,h6,
.h2,.wm-parent,.stamp-verdict,.tl-title,.count{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-0.04em;      /* tracking -10 per brand standards */
}

/* Eyebrows and small caps use Nunito Sans, not a mono face */
.eyebrow,.tl-date,.sev,.rule,.badge,.pill,.wm-product,.stamp-meta,.mono,.hint{
  font-family:var(--f-body);
}
.eyebrow,.wm-product,.stamp-meta,.tl-date{ font-weight:700 }
.sev,.badge,.pill{ font-weight:800 }

/* the paste-ready disclosure block stays monospaced - that is functional */
.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--b-ink) }

/* ============================================================
   Wordmark - 8Twelve as parent, Comply as the product
   ============================================================ */

.wordmark{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--b-blue) }
.wordmark:hover{ color:var(--b-blue) }

.wm-tile{
  display:grid; place-items:center;
  width:40px; height:40px; flex:0 0 40px;
  background:var(--b-blue); color:#fff; border-radius:9px;
  font-family:var(--f-display); font-weight:800; font-size:15px; line-height:1;
  letter-spacing:-.04em; position:relative; overflow:hidden;
}
.wm-tile::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:var(--b-gold);
}
.wm-lock{ display:flex; flex-direction:column; line-height:1 }
.wm-parent{ font-size:20px; color:var(--b-blue) }
.wm-parent em{ font-style:normal; color:var(--b-gold) }
.wm-product{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--b-grey2); margin-top:5px;
}
.wordmark.lg .wm-tile{ width:54px; height:54px; flex:0 0 54px; font-size:20px; border-radius:12px }
.wordmark.lg .wm-parent{ font-size:27px }
.wordmark.lg .wm-product{ font-size:11px; margin-top:6px }

/* ============================================================
   Footer - dark band with the Powered by lockup, as on the site
   ============================================================ */

.foot{
  border-top:0;
  background:var(--b-ink);
  color:rgba(255,255,255,.5);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:26px calc(50vw - 50% + 20px) 24px;
  align-items:center;
}
.foot p{ color:rgba(255,255,255,.5) }

.powered{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-body); font-size:12px; font-weight:400;
  color:rgba(255,255,255,.35); text-decoration:none; white-space:nowrap;
  transition:color .18s;
}
.powered:hover{ color:rgba(255,255,255,.7) }
.powered .pw-mark{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-display); font-weight:800; letter-spacing:-.03em;
  font-size:14px; color:rgba(255,255,255,.85);
}
.powered .pw-dot{ width:6px; height:6px; border-radius:50%; background:var(--b-gold); flex:0 0 6px }
.powered:hover .pw-mark{ color:#fff }

/* ============================================================
   Brand touches on shared components
   ============================================================ */

.tab[aria-selected="true"]{ color:var(--b-blue); border-bottom-color:var(--b-gold) }
.chip[aria-pressed="true"]{ background:var(--b-blue); border-color:var(--b-blue) }
.btn{ background:var(--b-blue); border-radius:9px }
.btn:hover:not(:disabled){ background:var(--b-gold) }
.btn-ghost{ border-radius:8px }
.btn-esc{ border-radius:9px }
.card{ border-radius:12px }
.input,.textarea,select.input{ border-radius:8px }
.top{ border-bottom-color:var(--b-blue) }
.stamp{ border-radius:10px }
.wm-tile{ border-radius:9px }
.list li::marker{ color:var(--b-gold) }
.finding.s-note{ border-left-color:var(--b-blue) }
.s-note .sev{ background:var(--b-blue) }
.alert.info{ border-left-color:var(--b-blue); background:var(--b-blue-wash) }
.tl-item.soon::before{ border-color:var(--b-gold) }
a{ color:var(--b-blue) }
a:hover{ color:var(--b-gold) }