/* ============================================================
   Leadkita brand tokens
   Single source of truth. The landing page, the pricing page and the
   GoHighLevel white label all read their values from here.
   Locked 28 Aug 2026. Logo direction A, "Kita".
   ============================================================ */

:root{

  /* --- Core colour -------------------------------------------------- */
  --lk-ink:        #0F2A3F;  /* wordmark, headings, body text, dark surfaces */
  --lk-deep:       #081724;  /* deepest surface: header plate, footer */
  --lk-gold:       #F5B133;  /* the lead. Mark and primary action only */
  --lk-gold-press: #DE9A1D;  /* gold button, hover and pressed */
  --lk-gold-tint:  #FEF3DE;  /* gold callout background, light */
  --lk-mist:       #EEF3F7;  /* tinted section background */
  --lk-paper:      #FFFFFF;

  /* --- Lines and text ----------------------------------------------- */
  --lk-line:        #D6E0E8;
  --lk-line-strong: #B9C9D6;
  --lk-muted:       #5A7285;  /* secondary text on light, 4.9:1 */
  --lk-on-dark:     #FFFFFF;
  --lk-on-dark-dim: #A8C0D0;  /* secondary text on ink, 7.1:1 */

  /* --- Status ------------------------------------------------------- */
  --lk-success: #157F5A;
  --lk-warning: #B26A00;   /* large text and icons only on white */
  --lk-danger:  #B3261E;
  --lk-info:    #1C6EA4;

  /* --- Type --------------------------------------------------------- */
  --lk-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lk-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --lk-display-xl: 800 clamp(34px, 5.4vw, 56px)/1.05 var(--lk-sans);
  --lk-display-l:  800 clamp(28px, 3.6vw, 40px)/1.1  var(--lk-sans);
  --lk-heading-m:  700 clamp(21px, 2.2vw, 26px)/1.2  var(--lk-sans);
  --lk-heading-s:  700 19px/1.3 var(--lk-sans);
  --lk-body-l:     400 18px/1.6 var(--lk-sans);
  --lk-body:       400 16px/1.6 var(--lk-sans);
  --lk-body-s:     400 14.5px/1.55 var(--lk-sans);

  --lk-track-display: -0.03em;
  --lk-track-heading: -0.02em;
  --lk-track-label:    0.14em;

  /* --- Space, radius, shadow ---------------------------------------- */
  --lk-s1: 4px;  --lk-s2: 8px;  --lk-s3: 12px; --lk-s4: 16px;
  --lk-s5: 24px; --lk-s6: 32px; --lk-s7: 48px; --lk-s8: 64px; --lk-s9: 96px;

  --lk-r-sm: 8px; --lk-r-md: 12px; --lk-r-lg: 16px; --lk-r-pill: 999px;

  --lk-shadow-card:   0 1px 2px rgba(15,42,63,.06), 0 8px 24px rgba(15,42,63,.06);
  --lk-shadow-raised: 0 2px 4px rgba(15,42,63,.08), 0 16px 40px rgba(15,42,63,.10);

  /* --- Logo --------------------------------------------------------- */
  --lk-wordmark-weight: 800;
  --lk-wordmark-tracking: -0.035em;
}

/* Contrast, measured. Do not change a pair without re-checking.
   ink   #0F2A3F on paper #FFFFFF -> 13.9:1  body text, safe
   muted #5A7285 on paper         ->  4.9:1  secondary text, passes AA
   gold  #F5B133 on deep  #081724 ->  9.6:1  safe for text on dark only
   gold  #F5B133 on paper         ->  1.9:1  NEVER use gold for text on white
   ink   #0F2A3F on gold  #F5B133 ->  7.4:1  the primary button pairing
   white on ink                   -> 13.9:1  reversed text, safe            */

/* ============================================================
   Logo
   Ink parts inherit currentColor. The lead dot is fill="var(--lk-gold, #F5B133)".
   ============================================================ */
.lk-mark{ width: 2rem; height: 2rem; color: var(--lk-ink); flex: 0 0 auto; }
.lk-mark--reversed{ color: var(--lk-paper); }
.lk-mark--mono{ --lk-gold: currentColor; }

.lk-lockup{ display: inline-flex; align-items: center; gap: .34em; }
.lk-wordmark{
  font-family: var(--lk-sans);
  font-weight: var(--lk-wordmark-weight);
  letter-spacing: var(--lk-wordmark-tracking);
  color: var(--lk-ink);
}
.lk-lockup--reversed .lk-wordmark{ color: var(--lk-paper); }

/* ============================================================
   Type helpers
   ============================================================ */
.lk-display-xl{ font: var(--lk-display-xl); letter-spacing: var(--lk-track-display); }
.lk-display-l { font: var(--lk-display-l);  letter-spacing: var(--lk-track-display); }
.lk-heading-m { font: var(--lk-heading-m);  letter-spacing: var(--lk-track-heading); }
.lk-heading-s { font: var(--lk-heading-s);  letter-spacing: var(--lk-track-heading); }
.lk-body-l    { font: var(--lk-body-l); }
.lk-body      { font: var(--lk-body); }
.lk-body-s    { font: var(--lk-body-s); }

/* Eyebrows, data labels, allowances. Mono, sparingly. */
.lk-label{
  font-family: var(--lk-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--lk-track-label);
  text-transform: uppercase;
  color: var(--lk-muted);
}

/* Prices: sans with tabular figures so columns line up and it stays warm.
   Never mono. Mono numerals read cold to a small business owner. */
.lk-price{
  font-family: var(--lk-sans);
  font-weight: 800;
  font-size: 44px; line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--lk-ink);
}
.lk-price .lk-cur{ font-size: .5em; font-weight: 700; vertical-align: .34em; margin-right: .12em; }
.lk-price .lk-per{ font: var(--lk-body-s); color: var(--lk-muted); letter-spacing: 0; }

/* ============================================================
   Components
   ============================================================ */
.lk-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--lk-sans); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 24px; border-radius: var(--lk-r-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; min-height: 48px;
  transition: background-color .15s ease, border-color .15s ease;
}
.lk-btn--primary{ background: var(--lk-gold); color: var(--lk-ink); }
.lk-btn--primary:hover{ background: var(--lk-gold-press); }
.lk-btn--secondary{ background: var(--lk-ink); color: var(--lk-paper); }
.lk-btn--secondary:hover{ background: var(--lk-deep); }
.lk-btn--ghost{ background: transparent; color: var(--lk-ink); border-color: var(--lk-line-strong); }
.lk-btn--ghost:hover{ border-color: var(--lk-ink); }
.lk-btn:focus-visible{ outline: 2px solid var(--lk-ink); outline-offset: 2px; }
.lk-lockup--reversed .lk-btn--ghost,
.lk-on-dark .lk-btn--ghost{ color: var(--lk-paper); border-color: rgba(255,255,255,.34); }
.lk-on-dark .lk-btn:focus-visible{ outline-color: var(--lk-gold); }

.lk-field{ display: grid; gap: 6px; }
.lk-field label{ font: 500 14.5px/1.4 var(--lk-sans); color: var(--lk-ink); }
.lk-input{
  font: var(--lk-body); color: var(--lk-ink);
  padding: 13px 14px; min-height: 48px;
  background: var(--lk-paper);
  border: 1px solid var(--lk-line-strong); border-radius: var(--lk-r-sm);
}
.lk-input::placeholder{ color: #8A9EAD; }
.lk-input:focus-visible{ outline: 2px solid var(--lk-ink); outline-offset: 1px; border-color: var(--lk-ink); }
.lk-hint{ font: var(--lk-body-s); color: var(--lk-muted); }
.lk-error{ font: var(--lk-body-s); color: var(--lk-danger); }

.lk-card{
  background: var(--lk-paper);
  border: 1px solid var(--lk-line);
  border-radius: var(--lk-r-md);
  padding: var(--lk-s5);
}
.lk-card--raised{ border-color: transparent; box-shadow: var(--lk-shadow-card); }
.lk-card--pick{ border: 2px solid var(--lk-ink); }

.lk-badge{
  display: inline-block;
  font-family: var(--lk-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--lk-r-pill);
  background: var(--lk-ink); color: var(--lk-paper);
}
.lk-badge--gold{ background: var(--lk-gold); color: var(--lk-ink); }
.lk-badge--quiet{ background: var(--lk-mist); color: var(--lk-muted); }

/* The disclosure callout. Used for the three things that must be said. */
.lk-note{
  border-left: 3px solid var(--lk-gold);
  background: var(--lk-gold-tint);
  padding: var(--lk-s4) var(--lk-s5);
  border-radius: 0 var(--lk-r-sm) var(--lk-r-sm) 0;
  font: var(--lk-body-s); color: var(--lk-ink);
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}