/* ==========================================================================
   Cohere Design System — token sheet
   Source: Cohere 2026 web system (version alpha)
   Reference var(--cohere-*) instead of raw values.
   Proprietary font files are not bundled; the stacks below ship fallbacks.
   ========================================================================== */

:root {
  /* ---- Brand & accent ---- */
  --cohere-black: #000000;
  --cohere-primary: #17171c;
  --cohere-deep-green: #003c33;
  --cohere-dark-navy: #071829;
  --cohere-action-blue: #1863dc;
  --cohere-coral: #ff7759;
  --cohere-coral-soft: #ffad9b;

  /* ---- Surfaces ---- */
  --cohere-canvas: #ffffff;
  --cohere-soft-stone: #eeece7;
  --cohere-pale-green: #edfce9;
  --cohere-pale-blue: #f1f5ff;

  /* ---- Text ---- */
  --cohere-ink: #212121;
  --cohere-body-muted: #616161;
  --cohere-muted: #93939f;
  --cohere-slate: #75758a;
  --cohere-on-primary: #ffffff;
  --cohere-on-dark: #ffffff;

  /* ---- Rules & borders ---- */
  --cohere-hairline: #d9d9dd;
  --cohere-border-light: #e5e7eb;
  --cohere-card-border: #f2f2f2;

  /* ---- Semantic ---- */
  --cohere-focus-blue: #4c6ee6;
  --cohere-form-focus: #9b60aa;
  --cohere-error: #b30000;

  /* ---- Font stacks ---- */
  --cohere-font-display: "CohereText", "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --cohere-font-body: "Unica77 Cohere Web", "Inter", Arial, ui-sans-serif, system-ui, sans-serif;
  --cohere-font-mono: "CohereMono", Arial, ui-sans-serif, system-ui, monospace;

  /* ---- Radius ---- */
  --cohere-radius-xs: 4px;
  --cohere-radius-sm: 8px;
  --cohere-radius-md: 16px;
  --cohere-radius-lg: 22px;
  --cohere-radius-xl: 30px;
  --cohere-radius-pill: 32px;
  --cohere-radius-full: 9999px;

  /* ---- Spacing (8px base, with system one-offs) ---- */
  --cohere-space-xxs: 2px;
  --cohere-space-xs: 6px;
  --cohere-space-sm: 8px;
  --cohere-space-md: 12px;
  --cohere-space-lg: 16px;
  --cohere-space-xl: 24px;
  --cohere-space-xxl: 32px;
  --cohere-space-section: 80px;
}

/* ==========================================================================
   Typography scale — weight stays 400 except buttons (500)
   ========================================================================== */

.cohere-hero-display,
.cohere-product-display {
  font-family: var(--cohere-font-display);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
}
.cohere-hero-display { font-size: 96px; letter-spacing: -1.92px; }
.cohere-product-display { font-size: 72px; letter-spacing: -1.44px; }

.cohere-section-display,
.cohere-section-heading,
.cohere-card-heading,
.cohere-feature-heading,
.cohere-body-large,
.cohere-body,
.cohere-caption,
.cohere-micro {
  font-family: var(--cohere-font-body);
  font-weight: 400;
  margin: 0;
}
.cohere-section-display { font-size: 60px; line-height: 1; letter-spacing: -1.2px; }
.cohere-section-heading { font-size: 48px; line-height: 1.2; letter-spacing: -0.48px; }
.cohere-card-heading { font-size: 32px; line-height: 1.2; letter-spacing: -0.32px; }
.cohere-feature-heading { font-size: 24px; line-height: 1.3; }
.cohere-body-large { font-size: 18px; line-height: 1.4; }
.cohere-body { font-size: 16px; line-height: 1.5; }
.cohere-caption { font-size: 14px; line-height: 1.4; }
.cohere-micro { font-size: 12px; line-height: 1.4; }

.cohere-mono-label {
  font-family: var(--cohere-font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.28px;
  text-transform: uppercase;
}

/* ==========================================================================
   Base surfaces
   ========================================================================== */

body.cohere {
  margin: 0;
  background: var(--cohere-canvas);
  color: var(--cohere-ink);
  font-family: var(--cohere-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.cohere-section { padding: var(--cohere-space-section) var(--cohere-space-xl); }
.cohere-container { max-width: 1280px; margin: 0 auto; }
.cohere-rule { border: 0; border-top: 1px solid var(--cohere-hairline); margin: 0; }

/* ==========================================================================
   Components — flat by default, no drop shadows
   ========================================================================== */

.cohere-button-primary {
  display: inline-block;
  background: var(--cohere-primary);
  color: var(--cohere-on-primary);
  font-family: var(--cohere-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.71;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--cohere-radius-pill);
  text-decoration: none;
  cursor: pointer;
}
/* On dark bands, invert the pill. */
.cohere-on-dark-surface .cohere-button-primary {
  background: var(--cohere-canvas);
  color: var(--cohere-primary);
}

.cohere-button-secondary {
  display: inline-block;
  background: transparent;
  color: var(--cohere-ink);
  font-size: 16px;
  line-height: 1.5;
  padding: 8px 0;
  border: 0;
  border-radius: var(--cohere-radius-xs);
  text-decoration: underline;
  cursor: pointer;
}

.cohere-button-pill-outline {
  display: inline-block;
  background: transparent;
  color: var(--cohere-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.71;
  padding: 6px 12px;
  border: 1px solid var(--cohere-primary);
  border-radius: var(--cohere-radius-xl);
  cursor: pointer;
}

.cohere-announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cohere-space-sm);
  height: 36px;
  background: var(--cohere-black);
  color: var(--cohere-on-dark);
  font-size: 12px;
  line-height: 1.4;
}

.cohere-hero-photo-card {
  background: var(--cohere-canvas);
  border-radius: var(--cohere-radius-lg);
  overflow: hidden;
}

.cohere-agent-console-card {
  background: var(--cohere-primary);
  color: var(--cohere-on-dark);
  border-radius: var(--cohere-radius-sm);
  padding: var(--cohere-space-xl);
}

.cohere-trust-logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 64px;
  background: var(--cohere-canvas);
  color: var(--cohere-ink);
  font-size: 14px;
  line-height: 1.4;
}
.cohere-trust-logo-strip img { filter: grayscale(1); opacity: 0.9; }

.cohere-capability-card {
  background: var(--cohere-canvas);
  color: var(--cohere-ink);
  padding: var(--cohere-space-xl);
  border-top: 1px solid var(--cohere-hairline);
}

.cohere-dark-feature-band {
  background: var(--cohere-deep-green);
  color: var(--cohere-on-dark);
  border-radius: var(--cohere-radius-lg);
  padding: var(--cohere-space-section);
}
.cohere-dark-feature-band--navy { background: var(--cohere-dark-navy); }

.cohere-product-card {
  background: var(--cohere-soft-stone);
  color: var(--cohere-ink);
  border-radius: var(--cohere-radius-sm);
  padding: var(--cohere-space-xxl);
}

.cohere-research-table {
  width: 100%;
  background: var(--cohere-canvas);
  color: var(--cohere-ink);
  font-size: 18px;
  line-height: 1.4;
  border-collapse: collapse;
}
.cohere-research-table td,
.cohere-research-table th {
  border-bottom: 1px solid var(--cohere-hairline);
  padding: var(--cohere-space-xl) var(--cohere-space-md);
  text-align: left;
  font-weight: 400;
}
.cohere-research-table td:last-child { text-align: right; color: var(--cohere-muted); }

.cohere-contact-form-card {
  background: var(--cohere-canvas);
  color: var(--cohere-ink);
  border-radius: var(--cohere-radius-lg);
  padding: var(--cohere-space-xxl);
}
.cohere-contact-form-card input,
.cohere-contact-form-card textarea,
.cohere-contact-form-card select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--cohere-font-body);
  font-size: 16px;
  padding: var(--cohere-space-md) var(--cohere-space-lg);
  color: var(--cohere-ink);
  background: var(--cohere-canvas);
  border: 1px solid var(--cohere-border-light);
  border-radius: var(--cohere-radius-xs);
}
.cohere-contact-form-card input:focus,
.cohere-contact-form-card textarea:focus {
  outline: none;
  border-color: var(--cohere-form-focus);
}
.cohere-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cohere-space-lg);
}

.cohere-footer-newsletter {
  background: var(--cohere-primary);
  color: var(--cohere-on-dark);
  font-size: 12px;
  line-height: 1.4;
  padding: var(--cohere-space-section) var(--cohere-space-xl);
}
.cohere-footer-newsletter .cohere-eyebrow { color: var(--cohere-coral); }
.cohere-footer-newsletter a { color: var(--cohere-muted); text-decoration: none; }

a { color: var(--cohere-ink); }
.cohere-link-editorial { color: var(--cohere-action-blue); }

:focus-visible {
  outline: 2px solid var(--cohere-focus-blue);
  outline-offset: 2px;
}