/* KV Multisolutions — Design Tokens
   Wrap every brand surface in `.kv-brand` so these vars don't leak out
   into the design-canvas chrome. */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

.kv-brand {
  /* Palette — Ember (default) */
  --kv-ember:        #D8782B;
  --kv-ember-deep:   #B45E1C;
  --kv-ember-soft:   #F2C79C;
  --kv-ember-wash:   #FBF1E5;

  --kv-charcoal:     #1C1814;
  --kv-charcoal-2:   #2A241E;
  --kv-ink:          #3B342C;
  --kv-graphite:     #6F665C;
  --kv-stone:        #8A8077;
  --kv-rule:         #E4DED4;
  --kv-paper:        #FAF7F1;
  --kv-paper-2:      #F3EEE3;
  --kv-white:        #FFFFFF;

  /* Type */
  --kv-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --kv-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --kv-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radii */
  --kv-r-sm: 4px;
  --kv-r-md: 8px;
  --kv-r-lg: 14px;

  /* Shadows */
  --kv-shadow-sm: 0 1px 2px rgba(28,24,20,0.06), 0 1px 3px rgba(28,24,20,0.04);
  --kv-shadow-md: 0 8px 24px -8px rgba(28,24,20,0.12), 0 2px 6px rgba(28,24,20,0.06);
  --kv-shadow-paper: 0 14px 40px -16px rgba(28,24,20,0.22), 0 4px 14px -8px rgba(28,24,20,0.10);

  color: var(--kv-ink);
  font-family: var(--kv-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Wordmark ─── */
.kv-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kv-charcoal);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.kv-wordmark__mark {
  width: 1.6em;
  height: 1.6em;
  display: inline-block;
  background-image: url("assets/kv-logo-transparent.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.kv-wordmark__name {
  font-family: var(--kv-display);
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: -0.015em;
}
.kv-wordmark__name b { font-weight: 600; color: var(--kv-ember); }

/* ─── Buttons ─── */
.kv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font: 500 14px/1 var(--kv-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.kv-btn--primary { background: var(--kv-ember); color: #fff; }
.kv-btn--primary:hover { background: var(--kv-ember-deep); }
.kv-btn--ghost { background: transparent; color: var(--kv-charcoal); border-color: var(--kv-rule); }
.kv-btn--ghost:hover { border-color: var(--kv-charcoal); }

/* ─── Eyebrow ─── */
.kv-eyebrow {
  font: 500 11px/1 var(--kv-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kv-ember-deep);
}

/* ─── Hairline divider ─── */
.kv-rule { height: 1px; background: var(--kv-rule); border: 0; }

/* ─── Card ─── */
.kv-card {
  background: var(--kv-paper);
  border: 1px solid var(--kv-rule);
  border-radius: var(--kv-r-lg);
}