/* For:Human — design system tokens.
   Editorial monograph: white/cream canvas, near-black type, dark pill as the only filled
   action, hairlines instead of shadows, 22px rounded media. The coral → violet → blue
   gradient is decoration only (imagery washes), never on text or controls.
   Typefaces: Inter (UI, body, display) and JetBrains Mono (micro-labels) stand in for the
   reference's proprietary faces. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* For:Human ID palette — the only brand colours on the site.
     Blue is the brand, Sky its light tint, Night its deep tone for dark bands; Lime is kept for
     actions (CTAs, the case arrow) so it always means "click". Ink and Mist carry the rest. */
  --fh-blue: #0082ff;
  --fh-blue-deep: #0060c9;
  --fh-indigo: #516add;
  --fh-sky: #cae3f3;
  --fh-sky-soft: #e8f2fa;
  --fh-night: #0a0a0a; /* the site's black: cards, hero frame, dark bands */
  --fh-lime: #b9ff76;
  --fh-lime-hover: #a8f25c;
  --fh-ink: #0a0a0a;
  --fh-mist: #f2f4f7;
  /* page background (warm off-white); cards and surfaces on it stay white */
  --fh-page: #f3f4f2;

  /* Colors */
  --color-canvas-white: #ffffff;
  --color-soft-cream: #f0eee9;
  --color-hairline-mist: #e5e7eb;
  --color-silver-rule: #d9d9dd;
  --color-fog: #93939f;
  --color-slate-caption: #75758a;
  --color-graphite-body: #616161;
  --color-press-black: #0a0a0a;
  --color-inkwell: #0a0a0a;
  --color-charcoal-depth: #2e2e2e;
  --color-iris-wash: #7670c5;
  --color-signal-blue: #4c6ee6;
  --color-lilac-mist: #f0dff3;
  --color-orchid: #d18ee2;
  --gradient-coral-glow: linear-gradient(to right, #ff7759, #7670c5, #4c6ee6);

  /* Typography */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --tracking-ui: -0.01em;
  --tracking-display: -0.02em;
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 32px;
  --text-heading-lg: 48px;
  --text-display: 72px;

  /* Spacing (8px base) */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --page-gutter: clamp(20px, 4vw, 40px);
  --section-gap: 80px;

  /* Radii — the complete set */
  --radius-small: 4px;
  --radius-nav: 8px;
  --radius-panel: 12px;
  --radius-card: 22px;
  --radius-pill: 9999px;

  /* Surfaces */
  --surface-canvas: var(--fh-page);
  --surface-cream: #f0eee9;
  --surface-lilac: #f0dff3;
  --surface-ink: #0a0a0a;
}

/* ---------------------------------------------------------------- shared primitives */
.ds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-inkwell);
  color: var(--color-canvas-white);
  font: 400 var(--text-body) / 1.2 var(--font-ui);
  letter-spacing: var(--tracking-ui);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.ds-pill:hover { opacity: 0.86; }
.ds-link {
  color: var(--color-press-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ds-micro {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- CTA shape (site-wide)
   Every call to action is a split button: the label block, a slanted cut, and the arrow in a
   block of its own (dashboard.cohere.com "Log in" button). The element keeps its own colours;
   a mask cuts the diagonal gap and ::after draws the arrow, so each variant works unchanged.
   The labels' own trailing arrows are hidden in favour of the shared one. */
:is(.fh-topbar-cta, .fh-site-footer-cta, .fhh-pill, .fhh-hero-cta, .fhs-btn) {
  --cta-arrow: 46px;
  --cta-gap: 7px;
  --cta-slant: 102deg;
  position: relative;
  min-height: 44px;
  padding-right: calc(var(--cta-arrow) + var(--cta-gap) + 18px) !important;
  padding-left: 20px !important;
  border-radius: 12px !important;
  -webkit-mask-image: linear-gradient(var(--cta-slant), #0a0a0a calc(100% - var(--cta-arrow) - var(--cta-gap)), transparent calc(100% - var(--cta-arrow) - var(--cta-gap)), transparent calc(100% - var(--cta-arrow)), #0a0a0a calc(100% - var(--cta-arrow)));
  mask-image: linear-gradient(var(--cta-slant), #0a0a0a calc(100% - var(--cta-arrow) - var(--cta-gap)), transparent calc(100% - var(--cta-arrow) - var(--cta-gap)), transparent calc(100% - var(--cta-arrow)), #0a0a0a calc(100% - var(--cta-arrow)));
}
:is(.fh-topbar-cta, .fh-site-footer-cta, .fhh-pill, .fhh-hero-cta, .fhs-btn)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--cta-arrow);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 46% 50% / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 46% 50% / 18px no-repeat;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.fh-topbar-cta, .fh-site-footer-cta, .fhh-pill, .fhh-hero-cta, .fhs-btn):hover::after { transform: translateX(3px); }
:is(.fh-topbar-cta, .fh-site-footer-cta, .fhh-pill, .fhh-hero-cta, .fhs-btn) > svg { display: none !important; }