/* ============================================================================
   Allora brand tokens - navy system
   Mirrors allora-app/docs/brand.md. Single source of truth for the marketing
   site + the eligibility questionnaire. Do not diverge from these tokens.
   ============================================================================ */

:root {
  /* ---- Core navy ---- */
  --navy: #0B2240;        /* navy-800 - primary: brand, CTAs, active, links, headings, arcs */
  --navy-deep: #08182E;   /* navy-900 - pressed/hover-dark, deep sections */
  --mist: #F2F3F2;        /* app / page background */
  --card: #FFFFFF;        /* cards / surfaces */
  --white: #FFFFFF;

  /* ---- Navy ramp ---- */
  --navy-600: #1C3D63;    /* secondary navy, chart line, hover-light, links */
  --navy-400: #4A6488;    /* muted navy / secondary data */
  --navy-100: #DCE3ED;    /* ring track, gradient base, selected-soft */
  --navy-50:  #EFF2F7;    /* soft navy surface (info blocks, selected rows) */

  /* ---- Neutrals ---- */
  --ink: #0B2240;         /* body text (text IS navy - cohesive) */
  --muted: #586677;       /* secondary text */
  --faint: #9DA9BC;       /* tertiary text, captions, kicker hints */
  --line: #E4E7EC;        /* borders / dividers */

  /* ---- Semantic ---- */
  --good: #10B981;        --good-soft: #D1FAE5;
  --alert: #EF4444;       --alert-soft: #FEE2E2;
  --caution: #F59E0B;     --caution-soft: #FEF3C7;

  /* ---- Radii ---- */
  --r-input: 12px;
  --r-card: 14px;
  --r-pill: 999px;

  /* ---- Focus ring (soft navy halo) ---- */
  --focus-ring: 0 0 0 4px rgba(11, 34, 64, .08);

  /* ---- Fonts ---- */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
}

/* ---- Global focus visibility (accessibility) ---- */
*:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reusable kicker / eyebrow (mono, uppercase, letter-spaced) */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}