/* ============================================================
   KPI6 Design System — Foundations
   Sibling of GMR. Same type family. Same grid discipline.
   Inverted canvas: paper-base, deep-navy ink, slate-blue accent.

   Source of truth:
     • Type:  DM Sans Medium (inherited from GMR)
     • Color: #F4F4F1 paper, #0F1828 navy ink, slate-blue accent
              derived from the KPI6 logo gradient (#3A5B8C → #1A2B4A)
   ============================================================ */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2-variations"),
       url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Base canvas (paper) -------------------------------- */
  --kpi-paper:      #F4F4F1;   /* primary canvas */
  --kpi-paper-2:    #ECECE6;   /* surface raised */
  --kpi-paper-3:    #E2E2DA;   /* surface raised +1 */
  --kpi-line:       #D6D6CE;   /* hairline / divider */
  --kpi-line-2:     #BFBFB6;   /* divider hover */

  /* ---- Ink (deep navy — warmer than pure black) ----------- */
  --kpi-ink:        #0F1828;   /* primary ink — deep navy */
  --kpi-ink-2:      #18233A;   /* raised navy surface */
  --kpi-ink-3:      #1F2C46;   /* raised navy +1 */
  --kpi-ink-line:   #2D3A55;   /* navy hairline */

  /* ---- Foreground on paper -------------------------------- */
  --kpi-fg:         #0F1828;   /* primary text */
  --kpi-fg-2:       #2E3A52;   /* default body */
  --kpi-fg-3:       #5F6B7F;   /* secondary text (the logo slate) */
  --kpi-fg-4:       #8B95A6;   /* tertiary / meta */
  --kpi-fg-dim:     #B5BCC8;   /* placeholder / disabled */

  /* ---- Foreground on navy --------------------------------- */
  --kpi-on-ink:     #F4F4F1;   /* primary on dark — paper */
  --kpi-on-ink-2:   #D6D9E0;   /* default body on dark */
  --kpi-on-ink-3:   #97A0B5;   /* secondary on dark */
  --kpi-on-ink-4:   #6B7588;   /* tertiary on dark */

  /* ---- Accent — derived from the KPI6 "6" logo gradient --- */
  --kpi-accent:        #3A5B8C;  /* slate-blue, mid */
  --kpi-accent-deep:   #1A2B4A;  /* deep navy edge of the gradient */
  --kpi-accent-light:  #7B92BD;  /* light blue edge of the gradient */
  --kpi-accent-soft:   rgba(58, 91, 140, 0.10); /* tint */

  /* ---- Semantic state ------------------------------------- */
  --kpi-success:    #2F7D5B;
  --kpi-warning:    #B47318;
  --kpi-danger:     #B33A3A;
  --kpi-info:       #3A5B8C;

  /* ---- Spacing (4pt base) — same scale as GMR ------------- */
  --kpi-space-1: 4px;
  --kpi-space-2: 8px;
  --kpi-space-3: 12px;
  --kpi-space-4: 16px;
  --kpi-space-5: 24px;
  --kpi-space-6: 32px;
  --kpi-space-7: 48px;
  --kpi-space-8: 64px;
  --kpi-space-9: 96px;
  --kpi-space-10: 128px;
  --kpi-space-11: 192px;

  /* ---- Radii — sharp, like GMR ---------------------------- */
  --kpi-radius-0: 0px;
  --kpi-radius-1: 2px;
  --kpi-radius-2: 4px;
  --kpi-radius-3: 8px;

  /* ---- Borders -------------------------------------------- */
  --kpi-border:     1px solid var(--kpi-line);
  --kpi-border-2:   1px solid var(--kpi-line-2);
  --kpi-border-ink: 1px solid var(--kpi-ink);

  /* ---- Type tokens ---------------------------------------- */
  --kpi-font-sans:  "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kpi-font-mono:  ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --kpi-w-regular:  400;
  --kpi-w-medium:   500;
  --kpi-w-semibold: 600;
  --kpi-w-bold:     700;

  /* Display = editorial, generous. Inherits GMR scale but pushes higher. */
  --kpi-size-display-xl: 128px;
  --kpi-size-display-l:  96px;
  --kpi-size-display-m:  72px;
  --kpi-size-display-s:  56px;
  --kpi-size-h1:         44px;
  --kpi-size-h2:         32px;
  --kpi-size-h3:         24px;
  --kpi-size-h4:         18px;
  --kpi-size-body-lg:    18px;
  --kpi-size-body:       16px;
  --kpi-size-small:      14px;
  --kpi-size-micro:      11px;

  --kpi-leading-tight: 100%;
  --kpi-leading-snug:  115%;
  --kpi-leading-body:  150%;

  --kpi-track-display: -0.025em;
  --kpi-track-body:    0em;
  --kpi-track-micro:   0.10em;

  /* ---- Motion --------------------------------------------- */
  --kpi-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --kpi-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --kpi-dur-fast:    120ms;
  --kpi-dur-base:    220ms;
  --kpi-dur-slow:    420ms;

  /* ---- Layout --------------------------------------------- */
  --kpi-container:   1320px;
  --kpi-gutter:      24px;
}

/* ============================================================ */
/*  Resets + base                                                */
/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--kpi-paper);
  color: var(--kpi-fg-2);
  font-family: var(--kpi-font-sans);
  font-size: var(--kpi-size-body);
  line-height: var(--kpi-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}
::selection { background: var(--kpi-ink); color: var(--kpi-paper); }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img, svg { display: block; max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--kpi-line); margin: 0; }

/* ============================================================ */
/*  Type utilities                                               */
/* ============================================================ */
.kpi-display-xl { font-weight: 500; font-size: clamp(64px, 10vw, var(--kpi-size-display-xl)); line-height: var(--kpi-leading-tight); letter-spacing: var(--kpi-track-display); color: var(--kpi-fg); }
.kpi-display-l  { font-weight: 500; font-size: clamp(48px, 7.5vw, var(--kpi-size-display-l)); line-height: var(--kpi-leading-tight); letter-spacing: var(--kpi-track-display); color: var(--kpi-fg); }
.kpi-display-m  { font-weight: 500; font-size: clamp(40px, 5.5vw, var(--kpi-size-display-m)); line-height: var(--kpi-leading-tight); letter-spacing: var(--kpi-track-display); color: var(--kpi-fg); }
.kpi-display-s  { font-weight: 500; font-size: clamp(36px, 4.5vw, var(--kpi-size-display-s)); line-height: var(--kpi-leading-tight); letter-spacing: var(--kpi-track-display); color: var(--kpi-fg); }
.kpi-h1         { font-weight: 500; font-size: clamp(32px, 3.5vw, var(--kpi-size-h1));         line-height: var(--kpi-leading-snug);  letter-spacing: var(--kpi-track-display); color: var(--kpi-fg); }
.kpi-h2         { font-weight: 500; font-size: clamp(24px, 2.6vw, var(--kpi-size-h2));         line-height: var(--kpi-leading-snug);  letter-spacing: -0.015em; color: var(--kpi-fg); }
.kpi-h3         { font-weight: 500; font-size: var(--kpi-size-h3); line-height: var(--kpi-leading-snug); letter-spacing: -0.01em; color: var(--kpi-fg); }
.kpi-h4         { font-weight: 500; font-size: var(--kpi-size-h4); line-height: var(--kpi-leading-snug); color: var(--kpi-fg); }
.kpi-lead       { font-weight: 400; font-size: var(--kpi-size-body-lg); line-height: 1.55; color: var(--kpi-fg-2); }
.kpi-p          { font-weight: 400; font-size: var(--kpi-size-body); line-height: var(--kpi-leading-body); color: var(--kpi-fg-2); }
.kpi-small      { font-weight: 400; font-size: var(--kpi-size-small); line-height: 1.55; color: var(--kpi-fg-3); }
.kpi-meta       { font-weight: 500; font-size: var(--kpi-size-micro); line-height: 1.4; color: var(--kpi-fg-3); text-transform: uppercase; letter-spacing: var(--kpi-track-micro); }
.kpi-mono       { font-family: var(--kpi-font-mono); font-size: 13px; color: var(--kpi-fg-3); }

/* On-ink variants */
.on-ink .kpi-display-xl, .on-ink .kpi-display-l, .on-ink .kpi-display-m, .on-ink .kpi-display-s,
.on-ink .kpi-h1, .on-ink .kpi-h2, .on-ink .kpi-h3, .on-ink .kpi-h4 { color: var(--kpi-on-ink); }
.on-ink .kpi-lead, .on-ink .kpi-p { color: var(--kpi-on-ink-2); }
.on-ink .kpi-small { color: var(--kpi-on-ink-3); }
.on-ink .kpi-meta  { color: var(--kpi-on-ink-3); }

/* ============================================================ */
/*  Layout helpers                                               */
/* ============================================================ */
.kpi-container {
  width: 100%;
  max-width: var(--kpi-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ============================================================ */
/*  Buttons                                                      */
/* ============================================================ */
.kpi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--kpi-font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.005em;
  border-radius: var(--kpi-radius-2);
  transition: background var(--kpi-dur-base) var(--kpi-ease),
              color var(--kpi-dur-base) var(--kpi-ease),
              border-color var(--kpi-dur-base) var(--kpi-ease),
              transform var(--kpi-dur-fast) var(--kpi-ease);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kpi-btn-primary {
  background: var(--kpi-ink);
  color: var(--kpi-paper);
  border-color: var(--kpi-ink);
}
.kpi-btn-primary:hover {
  background: var(--kpi-accent-deep);
  border-color: var(--kpi-accent-deep);
}
.kpi-btn-secondary {
  background: transparent;
  color: var(--kpi-fg);
  border-color: var(--kpi-ink);
}
.kpi-btn-secondary:hover {
  background: var(--kpi-ink);
  color: var(--kpi-paper);
}
.kpi-btn-ghost {
  background: transparent;
  color: var(--kpi-fg);
  border-color: var(--kpi-line-2);
}
.kpi-btn-ghost:hover { border-color: var(--kpi-ink); }

/* On-ink button variants */
.on-ink .kpi-btn-primary {
  background: var(--kpi-paper);
  color: var(--kpi-ink);
  border-color: var(--kpi-paper);
}
.on-ink .kpi-btn-primary:hover {
  background: var(--kpi-accent-light);
  border-color: var(--kpi-accent-light);
  color: var(--kpi-ink);
}
.on-ink .kpi-btn-secondary {
  color: var(--kpi-on-ink);
  border-color: var(--kpi-paper);
}
.on-ink .kpi-btn-secondary:hover {
  background: var(--kpi-paper);
  color: var(--kpi-ink);
}

/* Arrow link */
.kpi-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--kpi-fg);
  border-bottom: 1px solid var(--kpi-ink);
  padding-bottom: 4px;
  transition: gap var(--kpi-dur-base) var(--kpi-ease);
}
.kpi-arrow-link:hover { gap: 16px; }
.on-ink .kpi-arrow-link { color: var(--kpi-on-ink); border-bottom-color: var(--kpi-on-ink); }

/* ============================================================ */
/*  Eyebrow with tick mark                                       */
/* ============================================================ */
.kpi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: var(--kpi-size-micro);
  text-transform: uppercase;
  letter-spacing: var(--kpi-track-micro);
  color: var(--kpi-fg-3);
}
.kpi-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--kpi-accent);
}
.on-ink .kpi-eyebrow { color: var(--kpi-on-ink-3); }
.on-ink .kpi-eyebrow::before { background: var(--kpi-accent-light); }

/* ============================================================ */
/*  Numbered section label                                       */
/* ============================================================ */
.kpi-numbered {
  font-family: var(--kpi-font-mono);
  font-size: 13px;
  color: var(--kpi-fg-3);
  letter-spacing: 0.04em;
}
.on-ink .kpi-numbered { color: var(--kpi-on-ink-3); }

/* ============================================================ */
/*  Section base                                                 */
/* ============================================================ */
.kpi-section {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.kpi-section.on-ink {
  background: var(--kpi-ink);
  color: var(--kpi-on-ink-2);
}

/* ============================================================ */
/*  Cards (used for "ways we work", products, etc.)              */
/* ============================================================ */
.kpi-card {
  background: var(--kpi-paper);
  border: var(--kpi-border);
  padding: clamp(24px, 3vw, 40px);
  transition: border-color var(--kpi-dur-base) var(--kpi-ease),
              background var(--kpi-dur-base) var(--kpi-ease);
  position: relative;
}
.kpi-card:hover { border-color: var(--kpi-ink); }
.on-ink .kpi-card {
  background: var(--kpi-ink-2);
  border-color: var(--kpi-ink-line);
}
.on-ink .kpi-card:hover { border-color: var(--kpi-accent-light); }

/* ============================================================ */
/*  Dotted hairline grid background (subtle)                     */
/* ============================================================ */
.kpi-hairline-grid {
  background-image:
    linear-gradient(to right, var(--kpi-line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  background-position: left top;
}

/* ============================================================ */
/*  Density variants (driven by Tweaks)                          */
/* ============================================================ */
[data-density="compact"] .kpi-section { padding-block: clamp(48px, 6vw, 96px); }
[data-density="airy"]    .kpi-section { padding-block: clamp(80px, 12vw, 192px); }

/* ============================================================ */
/*  Reveal on scroll                                             */
/* ============================================================ */
.kpi-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--kpi-ease-out),
              transform 700ms var(--kpi-ease-out);
}
.kpi-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kpi-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================ */
/*  Focus rings                                                  */
/* ============================================================ */
:focus-visible {
  outline: 2px solid var(--kpi-accent);
  outline-offset: 3px;
}