/* KBX design tokens. Source: master plan sections 5.1 and 5.2.
   Headline face is [confirm]: Manrope, alternative Space Grotesk. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --kbx-blue: #5271FF;
  --kbx-blue-dark: #3D58E0;
  --kbx-blue-tint: #EEF1FF;
  --kbx-black: #0A0A0A;
  --kbx-ink-2: #3A3A3A;
  --kbx-ink-3: #6B6B6B;
  --kbx-line: #E3E5EC;
  --kbx-surface: #F6F7FA;
  --kbx-soft: #F8F8F8;
  --kbx-white: #FFFFFF;

  /* Only the inverted pricing card uses these: blue at full strength fails
     contrast on black, and body text at pure white on black is harsh. */
  --kbx-blue-light: #9DB0FF;
  --kbx-on-dark-muted: #CFD3DD;
  --kbx-success: #1E9E6A;
  --kbx-warning: #D98F1F;
  --kbx-danger: #D64545;

  /* Inter Tight is the closest freely licensed face to SF Pro Display.
     -apple-system sits first in the stack so Apple devices use the real thing. */
  --kbx-font-headline: -apple-system, BlinkMacSystemFont, "Inter Tight", "Inter",
    ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kbx-font-body: -apple-system, BlinkMacSystemFont, "Inter", ui-sans-serif, system-ui,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --kbx-shadow-soft: 0 8px 30px rgba(10, 10, 10, 0.08);
  --kbx-radius-pill: 999px;
  --kbx-radius-card: 16px;
  --kbx-radius-panel: 24px;

  --kbx-max: 1440px;
  --kbx-pill-h: 72px;
  --kbx-pill-h-small: 60px;
}

/* The floating pill sits over the page, so the first section needs clearance. */
.kbx-has-floating-header #kbx-main {
  padding-top: 104px;
}

@media (max-width: 1023px) {
  .kbx-has-floating-header #kbx-main {
    padding-top: 88px;
  }
}

/* Preview and authoring aid: anything still awaiting a decision. */
.kbx-confirm {
  outline: 1px dashed var(--kbx-warning);
  outline-offset: 2px;
}