/* ============================================================================
   hg-brand.css — HeyGroop marketing website brand layer
   ----------------------------------------------------------------------------
   Sits ON TOP of Bootstrap 5.3.3. Bootstrap is the grid + utility engine;
   this file overrides its defaults with HeyGroop's identity.

   SOURCE OF TRUTH: the app project's BRAND.md (color + type, LOCKED S4/S16)
   and DESIGN.md (§9.1 type ramp, §7 component color rules). Every hex here is
   transcribed from those locked tables — do not invent or adjust values here;
   change them in BRAND.md first, then reconcile this file.

   THE ONE RULE (BRAND.md §1): the brand color is never a state.
   Lime is a surface/field; navy is ink. State colors (settled/open/stalled/
   broken) appear ONLY inside a decision-card context — never as page chrome,
   never on a marketing banner. On this site that means: state tokens exist so
   the demo "decided card" can render truthfully, and nowhere else.

   THE MARKETING DIVERGENCE (website CONTEXT.md §4): navy carries chrome/ink/
   primary buttons; lime is used more freely as a hero/section FIELD than it is
   inside the app — but still never as a state, never as body text, never as an
   ordinary button. The one sanctioned lime button (DESIGN.md §7.3) is the
   engine/magic action ("Find decisions") — if a demo of that ever appears on
   the site, it is lime; the notify-me CTA is NOT an engine action, so it is navy.
   ============================================================================ */

:root{
  /* ---- Identity (BRAND.md §2, LOCKED) ---------------------------------- */
  --hg-navy:        #1F2A59;   /* ink */
  --hg-lime:        #C8F146;   /* field / surface — never a button (except §7.3) */
  --hg-gray-light:  #DCDCDC;
  --hg-gray-dark:   #808080;

  /* ---- Extended neutrals (BRAND.md §2, cooled toward navy) ------------- */
  --hg-white:       #FFFFFF;   /* card */
  --hg-page:        #F4F5F7;   /* page (light) */
  --hg-page-deep:   #E3E5EA;   /* deeper page — S15 UI spec / also the hairline stop */
  --hg-hairline:    #E3E5EA;
  --hg-muted:       #5C6370;   /* corrected in S16 to clear AA (was #6B7280 @4.43:1) */
  --hg-body:        #3A4152;
  --hg-ink:         #16192B;   /* deepest ink */

  /* ---- Brand support tints (BRAND.md §2) ------------------------------ */
  --hg-navy-light:  #2E3D7A;   /* raised navy surface / dark-mode support */
  --hg-lime-wash:   #E8FBB0;   /* soft lime tint — the engine-block field */

  /* ---- State palette (BRAND.md §4, LOCKED) ----------------------------
     CARD-CONTEXT ONLY. Present so the demo decided-card renders truthfully.
     Each state: tint (fill/chip bg) · core (dot/border/ring) · deep (text on tint). */
  --hg-settled-tint: #E1F5EE;  --hg-settled-core: #12866A;  --hg-settled-deep: #0C5F4C;
  --hg-open-tint:    #FAEEDA;  --hg-open-core:    #BA7517;  --hg-open-deep:    #854F0B;
  --hg-stalled-tint: #FAECE7;  --hg-stalled-core: #D85A30;  --hg-stalled-deep: #993C1D;
  --hg-broken-tint:  #FCEBEB;  --hg-broken-core:  #E24B4A;  --hg-broken-deep:  #A32D2D;

  /* ---- Type ramp (DESIGN.md §9.1, LOCKED) -----------------------------
     App ramp is relative pt at 1.0 scale; here it's the proportional reference.
     Weights: 400 regular, 600 semibold, 700 bold. 500 deliberately unused.
     NO THIN WEIGHTS, EVER (fails at 5:30am / glare / one-handed).
     Marketing headlines scale UP from this ramp via clamp() — the app's
     largest role is the 22pt screen title; the web hero is a marketing surface
     and may go larger, but the family, weights, and no-thin rule are doctrine. */
  --hg-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hg-w-regular: 400;
  --hg-w-semibold: 600;
  --hg-w-bold: 700;

  /* Bootstrap variable overrides (so utilities inherit the brand) */
  --bs-body-font-family: var(--hg-font);
  --bs-body-color: var(--hg-body);
  --bs-body-bg: var(--hg-white);
  --bs-emphasis-color: var(--hg-ink);
  --bs-link-color: var(--hg-navy);
  --bs-link-hover-color: var(--hg-ink);
  --bs-border-color: var(--hg-hairline);

  /* ---- Motion ---------------------------------------------------------- */
  --hg-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hg-ease-in:  cubic-bezier(.4, 0, 1, 1);
}

/* ============================================================================
   Base
   ============================================================================ */
*{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  font-family: var(--hg-font);
  color: var(--hg-body);
  background: var(--hg-white);
  overflow-x: hidden;
}
::selection{ background: var(--hg-lime); color: var(--hg-ink); }

/* ============================================================================
   Type scale — marketing roles.
   Named to echo the app ramp (§9.1) but scaled up for marketing surfaces.
   Ratios hold the hierarchy; absolute sizes are marketing-tuned.
   ============================================================================ */
.hg-display{                 /* hero — marketing surface, larger than the app's 22pt title */
  font-weight: var(--hg-w-bold);
  font-size: clamp(2.9rem, 8vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--hg-ink);
}
.hg-section-head{
  font-weight: var(--hg-w-bold);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--hg-ink);
}
.hg-card-head{               /* echoes §9.1 "card headline" role at 600 */
  font-weight: var(--hg-w-semibold);
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--hg-ink);
}
.hg-lead{
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  line-height: 1.6;
  color: var(--hg-body);
}
.hg-eyebrow{                 /* echoes §9.1 "role label / overline": 600, letter-spaced */
  font-weight: var(--hg-w-semibold);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hg-navy);
}
.hg-meta{ font-size: .85rem; color: var(--hg-muted); }

/* Trademark mark for "Groop Decision Engine™" */
.hg-tm{ font-size: .42em; vertical-align: .85em; font-weight: var(--hg-w-semibold); color: var(--hg-navy); }

/* ============================================================================
   Buttons (BRAND.md §5, DESIGN.md §7.3)
   Marketing primary = NAVY (chrome/ink). NOT lime — the notify-me CTA is not an
   engine action. The lime button is reserved for the engine/magic exception only.
   ============================================================================ */
.hg-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: var(--hg-w-semibold);
  border-radius: 100px;
  border: 0;
  padding: .95rem 1.5rem;
  font-size: 1.02rem;
  cursor: pointer;
  transition: transform .25s var(--hg-ease-out), background .25s;
  text-decoration: none;
}
.hg-btn-primary{ background: var(--hg-navy); color: #fff; }
.hg-btn-primary:hover{ background: var(--hg-ink); color: #fff; transform: translateY(-2px); }

.hg-btn-outline{
  background: transparent; color: var(--hg-navy);
  border: 1.5px solid var(--hg-navy);
}
.hg-btn-outline:hover{ background: var(--hg-navy); color: #fff; }

/* The sanctioned lime button — engine/magic action ONLY (DESIGN.md §7.3).
   Present for a future "Find decisions" demo; do NOT use on ordinary CTAs.
   Lime carries INK, never white (on-lime is #16192B in both modes). */
.hg-btn-engine{ background: var(--hg-lime); color: var(--hg-ink); }
.hg-btn-engine:hover{ background: #bce93a; color: var(--hg-ink); transform: translateY(-2px); }

.hg-btn-sm{ padding: .55rem 1.25rem; font-size: .95rem; }

/* ============================================================================
   Section rhythm — the contrast system (website CONTEXT.md §4)
   Alternating fields: white ↔ navy-ink ↔ lime. Lime is a FIELD here (sanctioned
   marketing use), never a state. On lime, ink is dark; never light text on lime
   unless it clears AA.
   ============================================================================ */
.hg-section{ padding: clamp(5rem, 11vh, 9rem) 0; position: relative; }

.hg-section-light{ background: var(--hg-white); }
.hg-section-page{  background: var(--hg-page-deep); }

.hg-section-navy{ background: var(--hg-ink); color: #fff; }
.hg-section-navy .hg-section-head{ color: #fff; }
.hg-section-navy .hg-eyebrow{ color: var(--hg-lime); }
.hg-section-navy .hg-lead{ color: rgba(255,255,255,.72); }

.hg-section-lime{ background: var(--hg-lime); color: var(--hg-ink); }
.hg-section-lime .hg-section-head{ color: var(--hg-ink); }
.hg-section-lime .hg-eyebrow{ color: var(--hg-navy); }
.hg-section-lime .hg-lead{ color: rgba(22,25,43,.72); }

/* ============================================================================
   The decided card (demo artifact) — the ONLY place state colors are allowed.
   Plain and factual per VOICE.md: no lime inside, no emoji, state colors only.
   ============================================================================ */
.hg-card{
  background: var(--hg-white);
  border: 1px solid var(--hg-hairline);
  border-radius: 22px;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 24px 60px rgba(22,25,43,.18);
}
.hg-card-eyebrow{
  font-size: .72rem; font-weight: var(--hg-w-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--hg-muted);
}
.hg-card-title{
  font-weight: var(--hg-w-bold); font-size: 1.28rem;
  color: var(--hg-ink); letter-spacing: -.01em; margin: .15rem 0 1rem;
}
.hg-row{
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .62rem 0; border-top: 1px solid var(--hg-hairline);
}
.hg-row:first-of-type{ border-top: 0; }
.hg-dot{ width: 9px; height: 9px; border-radius: 50%; margin-top: .42rem; flex: 0 0 9px; }
.hg-dot-settled{ background: var(--hg-settled-core); }
.hg-dot-open{    background: var(--hg-open-core); }
.hg-dot-stalled{ background: var(--hg-stalled-core); }
.hg-dot-broken{  background: var(--hg-broken-core); }
.hg-row-label{
  font-size: .74rem; color: var(--hg-muted); font-weight: var(--hg-w-semibold);
  text-transform: uppercase; letter-spacing: .05em;
}
.hg-row-value{ font-weight: var(--hg-w-bold); color: var(--hg-ink); font-size: 1.02rem; }
.hg-row-why{ font-size: .82rem; color: var(--hg-muted); margin-top: .1rem; }

/* Constraint chips — settled-tint bg, settled-deep text (DESIGN.md §5) */
.hg-chips{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.hg-chip{
  font-size: .72rem; font-weight: var(--hg-w-semibold);
  border-radius: 100px; padding: .28rem .68rem;
  background: var(--hg-settled-tint); color: var(--hg-settled-deep);
}

/* ============================================================================
   Nav
   ============================================================================ */
.hg-nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 1.1rem 0; transition: all .4s var(--hg-ease-out);
}
.hg-nav.scrolled{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  padding: .7rem 0;
  box-shadow: 0 1px 0 var(--hg-hairline);
}
.hg-logo{
  font-weight: var(--hg-w-bold); font-size: 1.35rem;
  color: var(--hg-ink); letter-spacing: -.02em; text-decoration: none;
}
.hg-logo .g{ color: var(--hg-navy); }
.hg-nav.scrolled .hg-logo .g{ color: var(--hg-navy); }

/* ============================================================================
   Forms — notify-me
   ============================================================================ */
.hg-input{
  border: 1.5px solid var(--hg-hairline); border-radius: 100px;
  padding: .95rem 1.4rem; font-size: 1.02rem;
  background: #fff; color: var(--hg-body);
  transition: border-color .25s, box-shadow .25s;
}
.hg-input:focus{
  outline: none; border-color: var(--hg-navy);
  box-shadow: 0 0 0 4px rgba(31,42,89,.08);
}
.hg-input.is-error{ border-color: var(--hg-stalled-core); }
.hg-success{
  display: none; align-items: center; gap: .6rem;
  font-weight: var(--hg-w-semibold); color: var(--hg-settled-core); font-size: 1.05rem;
}
.hg-success.show{ display: flex; }

/* ============================================================================
   Footer
   ============================================================================ */
.hg-footer{ background: var(--hg-ink); color: rgba(255,255,255,.6); padding: 4rem 0 2.5rem; }
.hg-footer a{ color: rgba(255,255,255,.8); text-decoration: none; }
.hg-footer a:hover{ color: var(--hg-lime); }
.hg-footer .hg-logo{ color: #fff; }
.hg-footer .hg-logo .g{ color: var(--hg-lime); }

/* ============================================================================
   Motion utilities
   ============================================================================ */
.hg-reveal{ opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce){
  .hg-reveal{ opacity: 1 !important; transform: none !important; }
  *{ scroll-behavior: auto !important; }
}

/* Accessible focus (quality floor) */
:focus-visible{ outline: 3px solid var(--hg-navy); outline-offset: 2px; border-radius: 4px; }

/* ============================================================================
   Mobile navigation (hamburger + dropdown panel)
   Desktop links use Bootstrap's d-none d-md-inline (visible >=768px).
   Below 768px those hide and the hamburger + panel take over.
   ============================================================================ */
.hg-mark{ width:1.15em; height:1.15em; color:var(--hg-navy); flex:0 0 auto; display:inline-block; }
.hg-footer .hg-logo .hg-mark{ color:var(--hg-lime); }
.hg-logo{ display:inline-flex; align-items:center; gap:.5rem; }

/* Desktop link cluster: shown >=768px, hidden below. Single source of truth. */
.hg-nav-desktop{ display:flex; align-items:center; gap:1.5rem; }
.hg-nav-desktop a.hg-navlink{ text-decoration:none; font-weight:600; color:var(--hg-ink); white-space:nowrap; }
.hg-nav-desktop a.hg-navlink:hover{ color:var(--hg-navy); }

/* Hamburger: hidden >=768px, shown below. */
.hg-burger{
  display:none; background:none; border:0; padding:.4rem; cursor:pointer;
  color:var(--hg-ink); line-height:0; border-radius:8px;
}
.hg-burger:hover{ background:rgba(22,25,43,.06); }
.hg-burger svg{ width:28px; height:28px; display:block; }

.hg-mobile-panel{
  display:none;
  position:absolute; top:100%; left:0; right:0;
  background:#fff;
  box-shadow:0 12px 30px rgba(22,25,43,.14);
  border-top:1px solid var(--hg-hairline);
  padding:.5rem 0 1.25rem;
}
.hg-mobile-panel.open{ display:block; }
.hg-mobile-panel a{
  display:block; padding:.9rem 1.5rem; font-weight:600; font-size:1.08rem;
  color:var(--hg-ink); text-decoration:none;
}
.hg-mobile-panel a:hover{ background:var(--hg-lime-wash); }
.hg-mobile-panel a.hg-btn{ margin:.85rem 1.5rem 0; display:inline-flex; color:#fff; }

/* The switch — the ONLY place nav visibility is decided. */
@media (max-width:767.98px){
  .hg-nav-desktop{ display:none !important; }
  .hg-burger{ display:inline-flex !important; }
}
@media (min-width:768px){
  .hg-mobile-panel{ display:none !important; }
}