/* ============================================================================
   tokens.css — Single source of truth for Kloudfuse marketing site.
   Colors, sizing, button + pill styles. All HTML files MUST import this.
   Add new tokens HERE, not in per-page <style> blocks.
   ----------------------------------------------------------------------------
   Usage:  <link rel="stylesheet" href="tokens.css">
   ============================================================================ */

:root {
  /* ---------- Surfaces (deep void, faint warm undertone to harmonise with the gradient) ---------- */
  --bg:        oklch(0.175 0.014 25);    /* page background */
  --bg-1:      oklch(0.205 0.018 25);    /* panel surface */
  --bg-2:      oklch(0.235 0.020 25);    /* raised surface */
  --bg-3:      oklch(0.265 0.022 25);    /* high-elevation surface */

  /* ---------- Borders / dividers ---------- */
  --line:      oklch(0.32 0.014 25);     /* hairline border */
  --line-soft: oklch(0.26 0.014 25);     /* subtler divider */

  /* ---------- Text ---------- */
  --fg:        oklch(0.96 0.005 60);     /* primary text */
  --fg-2:      oklch(0.78 0.010 60);     /* secondary text */
  --fg-3:      oklch(0.70 0.012 60);     /* tertiary / meta */

  /* ---------- Brand accents (matched to the magenta→orange→amber CTA gradient) ---------- */
  --accent:        oklch(0.74 0.20 40);                /* vivid orange — primary accent */
  --accent-2:      oklch(0.84 0.17 75);                /* amber — highlight tone */
  --accent-magenta:oklch(0.68 0.26 0);                 /* hot pink — gradient start */
  --accent-dim:    oklch(0.74 0.20 40 / 0.15);         /* tinted fill */
  --accent-glow:   oklch(0.74 0.20 40 / 0.35);         /* glow / shadow */

  /* ---------- Status / semantic ---------- */
  --warn:      oklch(0.82 0.16 75);      /* warn — slightly yellower amber */
  --crit:      oklch(0.68 0.22 25);      /* critical / red */
  --signal:    oklch(0.82 0.15 165);     /* observability green */
  --violet:    oklch(0.72 0.16 290);     /* secondary decorative accent */
  --dd:        oklch(0.66 0.21 295);     /* competitor (Datadog) purple — compare page */

  /* ---------- Themed CTA background — the magenta→orange→amber brand gradient. Used by .btn-primary, card gradient rings, link hovers. ---------- */
  --brand-cta: linear-gradient(135deg,
                  oklch(0.68 0.26 0)   0%,
                  oklch(0.74 0.22 40) 55%,
                  oklch(0.84 0.17 75) 100%);
  --brand-glow: oklch(0.74 0.22 35);

  /* ---------- Legacy aliases (kept so blog.html etc. resolve without rework) ---------- */
  --line-2:    var(--line);
  --ink:       var(--fg);
  --ink-2:     var(--fg-2);
  --ink-3:     var(--fg-3);
  --bad:       var(--crit);
  --plasma:    var(--violet);

  /* ---------- Homepage aliases (v4 homepage CSS references these names) ---------- */
  --maxw:         var(--content-max);
  --r-sm:         var(--radius-md);
  --r-md:         var(--radius-lg);
  --r-lg:         var(--radius-xl);
  --r-xl:         var(--radius-2xl);
  --font-sans:    var(--sans);
  --accent-hover: oklch(0.79 0.19 42);
  --line-dark:    oklch(0.24 0.014 25);
  --panel:        oklch(0.205 0.018 25);          /* raised diagram/panel surface */
  --node:         oklch(0.235 0.020 25);          /* node inside a diagram panel */
  --fg-soft:      var(--fg-2);                    /* de-emphasised label text (now matches body tone) */

  /* ---------- Typography ---------- */
  /* Font families — only these three. Never substitute system fonts in this codebase. */
  --sans:  'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  /* Bridging aliases — the platform pages (logs/metrics/k8s/rum/profiling/alerts/llm)
     author against --font-* names and --accent-line. Map them to the canonical tokens. */
  --font-sans:  var(--sans);
  --font-mono:  var(--mono);
  --font-serif: var(--serif);
  --accent-line: oklch(0.74 0.20 40 / 0.35);   /* visible accent hairline */

  /* ----- Type scale (semantic — use these, not literal px) ----- */
  /* Display / page-level headings */
  --fs-display: clamp(48px, 5.4vw, 80px);   /* hero h1 */
  --fs-h1:      clamp(40px, 4.4vw, 64px);   /* page h1 below hero */
  --fs-h2:      clamp(36px, 4vw,   56px);   /* section heading */
  --fs-h3:      22px;                       /* card / sub-section */
  --fs-h4:      18px;                       /* accordion row, sub-card */
  --fs-h5:      16px;                       /* small sub-heading */

  /* Body / paragraph */
  --fs-lead:    17px;                       /* lead paragraph under section h2 */
  --fs-body:    15px;                       /* default body */
  --fs-body-sm: 14px;                       /* card body, compact body */
  --fs-small:   13.5px;                     /* small UI text, footer links */

  /* Meta / mono / micro */
  --fs-mono:    12.5px;                     /* mono links, deep-link arrows */
  --fs-eyebrow: 12px;                       /* eyebrow tag above section h2 */
  --fs-meta:    11.5px;                     /* pill text, meta labels */
  --fs-micro:   11px;                       /* tiny labels, table heads */

  /* ----- Line heights ----- */
  --lh-tight:   1.02;   /* big display headings */
  --lh-snug:    1.2;    /* h3 / h4 */
  --lh-normal:  1.45;   /* large quote */
  --lh-relaxed: 1.6;    /* body */
  --lh-loose:   1.75;   /* tertiary copy */

  /* ----- Letter-spacings ----- */
  --ls-display: -0.035em;
  --ls-h2:      -0.030em;
  --ls-h3:      -0.020em;
  --ls-body:    -0.005em;
  --ls-meta:     0.06em;
  --ls-eyebrow:  0.18em;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 80px;
  --space-11: 100px;

  /* ---------- Layout ---------- */
  /* One site column. Matches --maxw/--pad in kf-design.css so the three
     pages still on this stylesheet sit on the same gutter as the rest. */
  --content-max:    1280px;
  --content-narrow: 1280px;
  --section-px:     40px;
  --pad:            var(--section-px);
  --section-py-lg:  100px;   /* major sections */
  --section-py-md:  80px;    /* compact sections */

  /* ---------- Button sizing ---------- */
  /* default */
  --btn-py:     9px;
  --btn-px:     16px;
  --btn-fs:     13.5px;
  --btn-gap:    8px;
  --btn-radius: 8px;
  --btn-weight: 500;
  --btn-weight-strong: 600;

  /* small */
  --btn-sm-py: 6px;
  --btn-sm-px: 12px;
  --btn-sm-fs: 12.5px;

  /* large (hero CTAs) */
  --btn-lg-py: 12px;
  --btn-lg-px: 22px;
  --btn-lg-fs: 15px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 0.15s;
  --dur-med:  0.25s;
}

/* ============================================================================
   Buttons — canonical styles.
   Apply class="btn btn-primary" / "btn btn-outline" / "btn btn-ghost".
   Size modifiers: btn-sm, btn-lg.
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: var(--btn-weight);
  line-height: 1;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color var(--dur-fast), background var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast),
              box-shadow var(--dur-fast);
  white-space: nowrap;
}

.btn-sm { padding: var(--btn-sm-py) var(--btn-sm-px); font-size: var(--btn-sm-fs); }
.btn-lg { padding: var(--btn-lg-py) var(--btn-lg-px); font-size: var(--btn-lg-fs); }

/* Reusable gradient ring (used on .btn-outline:hover and anywhere else) */
.btn-outline,
.btn-ghost {
  isolation: isolate;
}
.btn-outline::before,
.btn-ghost::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-cta);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  z-index: 0;
}

/* GHOST — bg-tinted on hover, text picks up the gradient */
.btn-ghost          { color: var(--fg-2); }
.btn-ghost:hover {
  color: var(--accent);
  background: var(--accent-dim);
}

/* OUTLINE — gradient ring fades in, text gets gradient-clipped */
.btn-outline        { border-color: var(--line); color: var(--fg); }
.btn-outline:hover  {
  border-color: transparent;
  background: var(--brand-cta);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-outline:hover::before { opacity: 1; }

/* PRIMARY — gradient already showing; lift + intensify glow on hover */
.btn-primary {
  background: var(--brand-cta);
  color: var(--bg);
  font-weight: var(--btn-weight-strong);
  box-shadow: 0 0 0 1px var(--brand-glow), 0 8px 24px -8px var(--brand-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--brand-glow), 0 18px 36px -10px var(--brand-glow);
}

/* ============================================================================
   Pill — small status / eyebrow capsule with optional pulsing dot.
   ============================================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg-1);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================================
   Shared link hover treatment \u2014 nav links + footer links pick up the brand
   gradient on hover. Any page that uses these class names gets it for free.
   ============================================================================ */

/* Top-level nav links only — must NOT match nested .mega-link items, or the
   gradient text-clip (transparent fill) combines with the mega-link's solid
   hover background and clips it to the text, rendering it invisible. */
.nav-links > a:hover,
.nav-links > .nav-item:hover > a,
.foot-grid a:hover,
.footer a:hover {
  background: var(--brand-cta);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================================
   Card hover \u2014 gradient ring fades in, soft bloom in the corner, subtle lift.
   Opt in by adding class="card-hover" (or applying to .cap on the homepage).
   ============================================================================ */

/* ============================================================================
   Card hover — gradient ring fades in, soft bloom in the corner, subtle lift.
   Applied to: .card-hover utility, .cap (homepage capability cards),
   .tile (bento tiles on platform pages), .related-card (related-content cards).
   ============================================================================ */

.card-hover,
.cap,
.tile,
.related-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-med) var(--ease-out),
              transform   var(--dur-med) var(--ease-out),
              box-shadow  var(--dur-med) var(--ease-out);
}
.card-hover::before,
.cap::before,
.tile::before,
.related-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-cta);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: 0;
}
.card-hover::after,
.cap::after,
.tile::after,
.related-card::after {
  content: '';
  position: absolute;
  right: -40%; bottom: -60%;
  width: 80%; height: 120%;
  background: var(--brand-cta);
  filter: blur(60px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
  z-index: 0;
}
.card-hover > *,
.cap > *,
.tile > *,
.related-card > * { position: relative; z-index: 1; }

.card-hover:hover,
.cap:hover,
.tile:hover,
.related-card:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -24px var(--brand-glow);
}
.card-hover:hover::before,
.cap:hover::before,
.tile:hover::before,
.related-card:hover::before { opacity: 1; }
.card-hover:hover::after,
.cap:hover::after,
.tile:hover::after,
.related-card:hover::after  { opacity: 0.18; }

/* ============================================================================
   Small card — compact reusable card for dense grids (architecture layers,
   feature rows). Pair with class="card-hover" for the gradient-ring hover.
   Layout helper: .card-grid (6-up, collapses to 3 then 2 on narrow screens).
   ============================================================================ */

.card-sm {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-sm .card-sm-num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--accent);
  letter-spacing: var(--ls-meta);
}
.card-sm h4 {
  font-size: var(--fs-h5);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
.card-sm p {
  font-size: var(--fs-small);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   Large card — standard-size reusable card (matches the bento .tile look).
   Pair with class="card-hover" for the gradient-ring hover.
   Layout helper: .card-grid-3 (3-up, collapses to 1 on narrow screens).
   ============================================================================ */

.card-lg {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--bg-1), var(--bg));
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-lg .eyebrow { margin-bottom: 2px; }
.card-lg h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
.card-lg h3 em { font-style: normal; color: var(--accent); }
.card-lg p {
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.card-grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .card-grid-3 { grid-template-columns: 1fr; } }

.card-grid-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 780px) { .card-grid-2 { grid-template-columns: 1fr; } }

.card-grid-4 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 880px) { .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .card-grid-4 { grid-template-columns: 1fr; } }

/* ============================================================================
   CTA band — full-width branded panel with permanent gradient ring + clipped em.
   Used on most marketing pages. Pages can scope-override h2 size if needed.
   ============================================================================ */

.cta-band {
  /* Sit on the page's content gutter, not on the column's outer edge, so the
     band lines up with the prose above it and keeps a gutter on mobile, where
     the auto margins used to let it run edge to edge. */
  margin: 80px auto;
  width: calc(100% - var(--section-px) * 2);
  max-width: calc(var(--content-max) - var(--section-px) * 2);
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 800px 400px at 30% 0%, var(--accent-dim), transparent 60%),
    radial-gradient(ellipse 600px 400px at 80% 100%, var(--accent-dim), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg));
  padding: 80px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-cta);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin-bottom: 18px;
  text-wrap: balance;
}
.cta-band h2 em {
  font-style: normal;
  background: var(--brand-cta);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.cta-band p {
  color: var(--fg-2);
  font-size: var(--fs-lead);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: var(--lh-relaxed);
}
.cta-buttons { display: inline-flex; gap: 12px; }
.cta-buttons .btn { padding: 13px 22px; font-size: var(--fs-body-sm); }

/* ============================================================================
   Global typography baseline.
   Every page already imports tokens.css, so heading levels render consistently
   without needing per-page rules. Override locally only when truly necessary.
   ============================================================================ */

html, body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 500;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1);      letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2);      letter-spacing: var(--ls-h2);      line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3);      letter-spacing: var(--ls-h3);      line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4);      letter-spacing: var(--ls-h3);      line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5);      letter-spacing: 0;                 line-height: var(--lh-snug); }
h6 { font-size: var(--fs-meta);    letter-spacing: var(--ls-meta);    line-height: var(--lh-snug); text-transform: uppercase; font-family: var(--mono); }

p  { font-size: var(--fs-body); line-height: var(--lh-relaxed); }

code, pre, kbd, samp { font-family: var(--mono); }

/* ----- Type utilities ----- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.lead    { font-size: var(--fs-lead);    line-height: var(--lh-relaxed); color: var(--fg-2); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-relaxed); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }
.meta    { font-family: var(--mono); font-size: var(--fs-meta); color: var(--fg-3); letter-spacing: var(--ls-meta); text-transform: uppercase; }
.mono    { font-family: var(--mono); }

/* Same gutter ramp as kf-design.css, so these pages track the rest of the
   site across breakpoints rather than holding one fixed value. */
@media (max-width:1024px){ :root{ --section-px: 32px } }
@media (max-width:900px){ :root{ --section-px: 22px } }