/*
 * tokens.css - the palette, type and spacing the shared site chrome is built
 * on. Every other file under shared/ reads these and defines no colour of its
 * own, so a brand change is one edit here.
 *
 * Deliberately namespaced --hv-*: the chrome is injected into pages that carry
 * their own token blocks (landing/index.html has --orange, --deep-navy and
 * friends), and an unprefixed name would collide with them silently.
 *
 * The two brand faces are expected to already be loaded by the host page;
 * system-ui is the fallback when they are not.
 *
 * Hard rule: zero em or en dashes anywhere in this file. Hyphens only.
 */

:root {
  /* Brand */
  --hv-orange: #FF5A00;
  --hv-orange-halo: rgba(255, 90, 0, 0.18);
  --hv-orange-wash: rgba(255, 90, 0, 0.12);
  --hv-orange-mist: rgba(255, 90, 0, 0.08);

  /* The dark end of the palette, shared with the home page's navy panels. */
  --hv-navy-950: #070A17;
  /* The same navy at the two stops the pinned footer fades between. */
  --hv-navy-950-veil: rgba(7, 10, 23, 0.9);
  --hv-navy-950-clear: rgba(7, 10, 23, 0);
  --hv-navy-900: #0B1030;
  --hv-navy-800: #121A46;

  /* Text on those darks. */
  --hv-ink: #FFFFFF;
  --hv-ink-dim: rgba(255, 255, 255, 0.78);
  --hv-ink-muted: rgba(255, 255, 255, 0.55);

  /* Hairlines and hover fills for controls sitting on the darks. */
  --hv-line: rgba(255, 255, 255, 0.22);
  --hv-line-bright: rgba(255, 255, 255, 0.35);
  --hv-line-soft: rgba(255, 255, 255, 0.12);
  --hv-line-faint: rgba(255, 255, 255, 0.08);
  --hv-fill-hover: rgba(255, 255, 255, 0.08);
  --hv-fill-hover-soft: rgba(255, 255, 255, 0.06);
  --hv-field-bg: rgba(255, 255, 255, 0.06);
  --hv-field-bg-focus: rgba(255, 255, 255, 0.09);
  --hv-placeholder: rgba(255, 255, 255, 0.35);

  /* The two states the signup form answers in. */
  --hv-error-ink: #FFB4A5;
  --hv-error-bg: rgba(255, 90, 0, 0.10);
  --hv-error-line: rgba(255, 90, 0, 0.30);
  --hv-ok-ink: #9DE0B5;
  --hv-ok-bg: rgba(22, 163, 74, 0.12);
  --hv-ok-line: rgba(22, 163, 74, 0.35);

  /* Scrims and lifts. */
  --hv-scrim: rgba(4, 6, 16, 0.72);
  --hv-shadow-menu: 0 16px 40px rgba(0, 0, 0, 0.45);
  --hv-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.45);
  /* The transparent end of any orange wash. Named because a gradient needs
     both stops and "transparent" would fade through grey in some engines. */
  --hv-orange-clear: rgba(255, 90, 0, 0);

  /* Type */
  --hv-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --hv-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Chrome metrics */
  --hv-chrome-pad-x: clamp(24px, 4vw, 56px);
  --hv-footer-height: 48px;
  --hv-footer-size: 12px;
  --hv-footer-tracking: 0.22em;

  /* Shape and motion */
  --hv-radius-pill: 999px;
  --hv-radius-sm: 8px;
  --hv-radius-md: 12px;
  --hv-radius-lg: 18px;
  --hv-transition: 0.15s ease;

  /* The width below which the footer collapses to a hamburger. Kept here as
     documentation: a media query cannot read a custom property, so the number
     itself is repeated in the two files that break at it. */
  --hv-chrome-narrow-max: 720px;
}