/* Ki design tokens + shared helper classes.
   Sourced verbatim from the two Ki HTML design files so widgets render
   identically to the originals.

   SCOPING / CONFLICT-SAFETY:
   - Only the namespaced --ki-* vars are exposed at :root (safe).
   - Unprefixed aliases (--ink, --paper, --serif, --ki, --ki-deep, etc.) live
     ONLY under .ki-scope so they cannot collide with other plugins/themes
     that define the same variable names.
   - Every widget renders its markup inside a `<div class="ki-scope ki-{slug}">`,
     and all helper class rules are gated behind `.ki-scope` so nothing
     escapes the widget root.
   - The original :root block from the HTML used names like `--ink`/`--paper`
     which are extremely common — restricting them here is the whole point. */

/* Safe, namespaced tokens — exposed globally so the editor + frontend can
   reference them, but unlikely to collide with anything. */
:root {
  /* Source palette — verbatim from Ki Home.html :root (lines 11–29). */
  --ki-ink:        #16161A;
  --ki-ink-soft:   #3E3E47;
  --ki-ink-mute:   #666666;
  --ki-paper:      #FFFFFF;
  --ki-cream:      #F3F1EC;
  --ki-sand:       oklch(0.92 0.020 75);
  --ki-bone:       oklch(0.89 0.014 75);
  --ki-rule:       #E6E2D9;   /* warm rule (source `--rule`) */
  /* Brand palette — from "KI HOMEPAGE REVAMP - STYLING & TYPOGRAPHY" */
  --ki-blue:       #0099CC;   /* Global Primary Ki Blue */
  --ki-blue-2:     #2CCCD3;   /* Teal accent (catchlines in new home design) */
  --ki-blue-deep:  #1B748A;   /* deeper teal-blue (Why-Choose / icons) */
  --ki-blue-tint:  #DAE8F5;   /* light wash (Ingredients bg, aka "sky") */
  --ki-blue-mist:  #ECFEFF;   /* lightest mist (Use-case bg) */
  --ki-rule-cool:  #D6E2EE;   /* cool rule line — used inside chart grids */
  --ki-slate:      #1A2730;   /* dark slate (founders bg etc.) */
  --ki-gold:       oklch(0.70 0.075 75);
  /* Brand typography — Marcellus headings, Plus Jakarta Sans body.
     Marcellus has no italic, so italic accents fall back to Cormorant. */
  --ki-serif:        "Marcellus", "Cormorant Garamond", Georgia, serif;
  --ki-serif-italic: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --ki-sans:         "Plus Jakarta Sans", "Manrope", "Helvetica Neue", system-ui, sans-serif;
  --ki-body:         "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --ki-num:          "Inter", system-ui, sans-serif;   /* tabular numbers / stats */
  --ki-mono:         "JetBrains Mono", ui-monospace, monospace;
}

/* Original-name aliases — confined to .ki-scope so they cannot leak to
   other plugins/themes that define the same names globally. */
.ki-scope {
  --ink:        var(--ki-ink);
  --ink-soft:   var(--ki-ink-soft);
  --ink-mute:   var(--ki-ink-mute);
  --paper:      var(--ki-paper);
  --cream:      var(--ki-cream);
  --sand:       var(--ki-sand);
  --bone:       var(--ki-bone);
  --rule:       var(--ki-rule);
  --ki:         var(--ki-blue);
  --ki-deep:    var(--ki-blue-deep);
  --ki-tint:    var(--ki-blue-tint);
  --ki-mist:    var(--ki-blue-mist);
  --gold:       var(--ki-gold);
  --serif:      var(--ki-serif);
  --sans:       var(--ki-sans);
  --mono:       var(--ki-mono);
}

/* Local reset — scoped to widget roots only, so we don't fight the theme. */
.ki-scope, .ki-scope * { box-sizing: border-box; }
.ki-scope img { display: block; max-width: 100%; }
.ki-scope a { color: inherit; text-decoration: none; }
.ki-scope button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* Uploaded icon images (the image-or-SVG icon override) sit inside whatever
   icon container the widget provides, contained and centred, never stretched. */
.ki-scope .ki-icon-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* Neutralize theme blockquote decoration. Themes (e.g. Twenty Twenty-Four)
   add a large decorative quotation glyph via ::before plus a tinted box /
   border to every <blockquote>. That bled THROUGH our testimonial text. We
   strip all of it inside .ki-scope so widgets control their own quote marks. */
.ki-scope blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  quotes: none;
  font-style: inherit;
}
.ki-scope blockquote::before,
.ki-scope blockquote::after {
  content: none !important;
  display: none !important;
}

/* Brand rule: Marcellus (the heading serif) has no italic cut, so any
   italic accent inside a heading — <em>, <i>, or the .ital helper — is
   rendered in Cormorant Garamond italic instead. Keeps the editorial
   italic-accent look the designs rely on. */
.ki-scope h1 em,  .ki-scope h2 em,  .ki-scope h3 em,  .ki-scope h4 em,
.ki-scope h1 i,   .ki-scope h2 i,   .ki-scope h3 i,   .ki-scope h4 i,
.ki-scope .display em, .ki-scope .ki-display em,
.ki-scope .ital, .ki-scope .ki-ital {
  font-family: var(--ki-serif-italic);
  font-style: italic;
}

/* ───── Typography helpers — scoped ───── */
.ki-scope { color: var(--ki-ink); font-family: var(--ki-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ki-scope .ki-serif   { font-family: var(--ki-serif); font-weight: 400; letter-spacing: -0.01em; }
.ki-scope .ki-display { font-family: var(--ki-serif); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em; }
.ki-scope .ki-ital    { font-style: italic; }
.ki-scope .ki-eyebrow {
  font-family: var(--ki-sans); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ki-blue-2); font-weight: 600;
}
.ki-scope .ki-smallcaps {
  font-family: var(--ki-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--ki-ink-soft);
}
/* Catchline — Source HTML `.catchline` (lines 45–49). 14px / 600 / 0.22em
   tracking / uppercase / teal accent. Most home sections use this verbatim. */
.ki-scope .catchline {
  font-family: var(--ki-sans); font-size: 14px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ki-blue-2);
}
/* Back-compat short aliases — also scoped under .ki-scope, never global */
.ki-scope .serif    { font-family: var(--ki-serif); font-weight: 400; letter-spacing: -0.005em; }
.ki-scope .display  { font-family: var(--ki-serif); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; }
.ki-scope .ital     { font-style: italic; }
.ki-scope .eyebrow  { font-family: var(--ki-sans); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ki-blue-2); font-weight: 600; }
.ki-scope .small-caps { font-family: var(--ki-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--ki-ink-soft); }
/* Source `.h-display` helper — used by morning banner, etc. */
.ki-scope .h-display {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.04; letter-spacing: -0.01em;
  color: var(--ki-ink);
}

/* ───── Layout helpers ───── */
.ki-scope .wrap   { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.ki-scope .narrow { max-width: 1040px; margin: 0 auto; padding: 0 48px; }
.ki-scope .rule       { height: 1px; background: var(--ki-rule); width: 100%; }
.ki-scope .rule-soft  { height: 1px; background: linear-gradient(90deg, transparent, var(--ki-rule) 20%, var(--ki-rule) 80%, transparent); width: 100%; }
.ki-scope .row { display: flex; }

/* Section framing — used by most widgets (renamed to .ki-block, not bare
   `.block`, which is far too generic to leave unscoped) */
.ki-scope .ki-block { padding: 140px 0; position: relative; }
.ki-scope .ki-block.cream { background: var(--ki-cream); }
.ki-scope .ki-block.ink   { background: var(--ki-ink); color: var(--ki-paper); }
.ki-scope .ki-block.ink .eyebrow,
.ki-scope .ki-block.ink .small-caps { color: oklch(0.72 0.04 230); }

/* Section head — Source `.section-head` (Ki Home.html lines 162–171).
   1fr / 2fr grid · 80px gap · margin-bottom 80px · ends-aligned.
   Right cell is plain sans body copy, NOT italic serif. */
.ki-scope .section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  margin-bottom: 80px;
  align-items: end;
}
.ki-scope .section-head .left .eyebrow,
.ki-scope .section-head .left .catchline {
  margin-bottom: 22px; display: block;
}
.ki-scope .section-head h2 {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.04; letter-spacing: -0.01em; margin: 0;
}
.ki-scope .section-head .right {
  font-family: var(--ki-sans);
  font-size: 18px; line-height: 1.65;
  color: var(--ki-ink-mute); max-width: 560px;
}

/* ───── Buttons ───── */
.ki-scope .btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  height: 60px; padding: 0 32px;
  background: var(--ki-paper); color: var(--ki-ink);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.ki-scope .btn-primary:hover { background: var(--ki-blue); color: var(--ki-paper); transform: translateY(-1px); }
.ki-scope .btn-primary .ar { transition: transform 220ms ease; font-family: var(--ki-serif); font-style: italic; font-size: 18px; font-weight: 400; letter-spacing: 0; }
.ki-scope .btn-primary:hover .ar { transform: translateX(4px); }

.ki-scope .btn-ink {
  height: 58px; padding: 0 32px;
  background: var(--ki-ink); color: var(--ki-paper);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px; display: inline-flex; align-items: center; gap: 14px;
  transition: background 220ms ease, transform 220ms ease;
}
.ki-scope .btn-ink:hover { background: var(--ki-blue-deep); transform: translateY(-1px); }
.ki-scope .btn-ink::after { content: "→"; font-family: var(--ki-serif); font-size: 18px; }

.ki-scope .btn-ghost {
  height: 58px; padding: 0 28px;
  border: 1px solid var(--ki-ink); color: var(--ki-ink);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px; display: inline-flex; align-items: center; gap: 12px;
  background: transparent;
  transition: background 220ms ease, color 220ms ease;
}
.ki-scope .btn-ghost:hover { background: var(--ki-ink); color: var(--ki-paper); }

.ki-scope .btn-light {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px;
  background: var(--ki-paper); color: var(--ki-ink);
  font-family: var(--ki-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  border-radius: 2px;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.ki-scope .btn-light:hover { background: var(--ki-blue); color: var(--ki-paper); transform: translateY(-1px); }

/* ───── Placeholder image stripes (used when no image set yet) ───── */
.ki-scope .ph-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, #E6E0D0 14px 15px);
  opacity: 0.6;
}
.ki-scope .ph-label {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--ki-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ki-ink-mute); text-transform: uppercase;
  background: rgba(255, 255, 255, 0.78); padding: 4px 8px;
}
.ki-scope .ph-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ki-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--ki-ink-mute); text-transform: uppercase;
  text-align: center; padding: 0 14px;
}

/* ───── SVG logo helper ───── */
.ki-scope .ki-logo { width: 48px; height: 48px; display: block; }
.ki-scope .ki-logo path,
.ki-scope .ki-logo circle { transition: stroke 200ms ease, fill 200ms ease; }

/* ───── Responsive baseline ───── */
@media (max-width: 1100px) {
  .ki-scope .wrap,
  .ki-scope .narrow { padding: 0 32px; }
  .ki-scope .ki-block { padding: 96px 0; }
  .ki-scope .section-head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  .ki-scope .wrap,
  .ki-scope .narrow { padding: 0 24px; }
  .ki-scope .ki-block { padding: 72px 0; }
}