/* ============================================================
   Follow The Money — brand system
   Derived from the "Breadcrumb Trail" logo concept
   (Claude Design canvas: FTM — Flat Logo Concepts, Concept 01)

   Metaphor: a trail of dots growing from faint to solid, ending
   in a target — following the money from fraud to conviction.

   Shared by every static page in landing-page/. The app
   (app/src/app/globals.css) carries the same tokens as shadcn
   variables so the two surfaces stay in step.
   ============================================================ */

:root {
  /* Core — straight from the concept's LogoBreadcrumb tokens */
  --ftm-navy: #0f1729;        /* NAVY / INK — wordmark, target dot */
  --ftm-teal: #0d9488;        /* TEAL — trail dots, tagline, primary action */
  --ftm-teal-dk: #0b7970;     /* TEAL_DK — hover / pressed */

  /* Navy ramp */
  --ftm-navy-950: #0a1120;
  --ftm-navy-900: #0f1729;
  --ftm-navy-800: #1a2332;
  --ftm-navy-700: #243044;
  --ftm-navy-600: #2e3d56;

  /* Teal ramp */
  --ftm-teal-700: #0f766e;
  --ftm-teal-600: #0b7970;
  --ftm-teal-500: #0d9488;
  --ftm-teal-400: #2dd4bf;
  --ftm-teal-300: #5eead4;

  /* Parchment — the warm ground the concept sheets are laid on */
  --ftm-parchment-50: #fafaf8;
  --ftm-parchment-100: #f5f5f0;
  --ftm-parchment-200: #e5e5e0;

  /* Cool neutrals for body copy and rules */
  --ftm-slate-200: #e2e8f0;
  --ftm-slate-500: #64748b;
  --ftm-slate-600: #475569;

  /* Type */
  --ftm-font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --ftm-font-sans: "Inter", -apple-system, system-ui, sans-serif;
}

/* ---------- Typography ----------------------------------------
   The concept pairs a serif display face with Inter for
   everything else. Headings pick up the serif automatically so
   pages don't need per-heading classes.
   -------------------------------------------------------------- */

body {
  font-family: var(--ftm-font-sans);
}

h1, h2, h3,
.ftm-display {
  font-family: var(--ftm-font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.018em;
}

/* Small all-caps line under a wordmark or above a section head */
.ftm-eyebrow {
  font-family: var(--ftm-font-sans);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ftm-teal-500);
}

/* Opt out where a serif would fight the content (numbers, UI chrome) */
.ftm-sans,
.ftm-sans h1,
.ftm-sans h2,
.ftm-sans h3 {
  font-family: var(--ftm-font-sans);
  letter-spacing: normal;
}

/* ---------- Breadcrumb lockup ---------------------------------
   Colours come through custom properties so one piece of markup
   works on both light and navy grounds.
   -------------------------------------------------------------- */

.ftm-lockup {
  --lockup-word: var(--ftm-navy);
  --lockup-tag: var(--ftm-teal-500);
  --lockup-dot: var(--ftm-teal-500);
  --lockup-target: var(--ftm-navy);
  --lockup-target-core: var(--ftm-teal-500);
  display: inline-block;
  /* Tall enough that the FRAUD · TO · CONVICTION line stays legible —
     it is 10/60 of the artwork height, so anything under ~2.4rem loses it. */
  height: 2.5rem;
  width: auto;
  vertical-align: middle;
}

.ftm-lockup--on-dark {
  --lockup-word: #ffffff;
  --lockup-tag: var(--ftm-teal-400);
  --lockup-dot: var(--ftm-teal-400);
  --lockup-target: #ffffff;
  --lockup-target-core: var(--ftm-teal-500);
}

.ftm-lockup--sm { height: 2rem; }
.ftm-lockup--lg { height: 3.25rem; }

/* Square app mark — navy tile, trail, white target */
.ftm-mark {
  --mark-bg: var(--ftm-navy);
  --mark-dot: var(--ftm-teal-500);
  --mark-target: #ffffff;
  --mark-target-core: var(--ftm-teal-500);
  display: inline-block;
  height: 2.25rem;
  width: 2.25rem;
}

/* A standalone trail, used as a section divider */
.ftm-trail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ftm-trail span {
  display: block;
  border-radius: 9999px;
  background: var(--ftm-teal-500);
}

.ftm-trail span:nth-child(1) { width: 4px;  height: 4px;  opacity: 0.35; }
.ftm-trail span:nth-child(2) { width: 6px;  height: 6px;  opacity: 0.55; }
.ftm-trail span:nth-child(3) { width: 8px;  height: 8px;  opacity: 0.75; }
.ftm-trail span:nth-child(4) { width: 11px; height: 11px; opacity: 1; }
.ftm-trail span:nth-child(5) {
  width: 15px;
  height: 15px;
  background: var(--ftm-navy);
  box-shadow: inset 0 0 0 4px var(--ftm-teal-500);
}

.ftm-trail--on-dark span:nth-child(5) {
  background: #ffffff;
}

/* ---------- Surfaces ------------------------------------------ */

.ftm-parchment { background-color: var(--ftm-parchment-50); }
.ftm-parchment-alt { background-color: var(--ftm-parchment-100); }
.ftm-rule { border-color: var(--ftm-parchment-200); }