/* ============================================================================
   Fly.AI design system — the single token layer for landing, portal, and app.

   Written against the 5-lens competitive audit vs blacktomato.com (2026-07-24).
   Each block notes the finding it closes so the constraint survives the next edit.
   ========================================================================== */

@import url("fonts.css");

:root {
  /* --- Type -----------------------------------------------------------------
     AUDIT: type was the ONLY untokenized system in the prototype — 24 distinct
     font-sizes, five of them within 4px doing five different hierarchy jobs,
     and a 2.6x cliff from H2 (21.6) to H1 (56) with no step between.
     This is a ~1.25 modular scale. Do not add a size that is not on it. */
  --t-xs: 11px;      /* overlines, mono meta */
  --t-sm: 12.5px;    /* card metadata, dates */
  --t-md: 14px;      /* dense UI, chips */
  --t-body: 16px;    /* running text — never smaller for reading copy */
  --t-lg: 20px;      /* card names, queue numbers, stub days (was 18.4/19.84/20.8) */
  --t-h2: 25px;      /* section heads — raised from 21.6 so they stop competing
                        with card names, which sat 1.8px away */
  --t-num: 31px;     /* hero stat numerals */
  --t-name: 39px;    /* detail-page person name */
  --t-xl: 49px;      /* marketing section heads at their largest */
  --t-h1: clamp(var(--t-name), 5vw, 56px);
  --t-display: clamp(44px, 7vw, 92px);  /* landing hero only */

  /* AUDIT: font-weight:600 exists in NO font in the old stack — Hoefler Text
     ships Regular/Italic/Black/BlackItalic only (verified via system_profiler),
     so every heading silently rendered as Black. Fraunces is variable 300-700,
     so these weights are now real. */
  --w-body: 400;
  --w-med: 500;
  --w-bold: 600;

  --serif: "Fraunces", "Fraunces-fallback", Georgia, serif;
  --sans: "Figtree", "Figtree-fallback", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fraunces carries an optical-size axis; set it per role so display sizes get
     the high-contrast cut and body sizes get the sturdier one. */
  --opsz-display: "opsz" 120;
  --opsz-text: "opsz" 24;

  /* --- Space ----------------------------------------------------------------
     AUDIT: a 6/10/16/24/36/52 ramp was declared and then used by exactly 3 of
     ~90 declarations — ~29 raw values shipped instead, including 11-vs-13 and
     22-vs-24 near-misses. Same ramp, now the only source. */
  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 24px;
  --s5: 36px;
  --s6: 52px;
  --s7: 80px;   /* section rhythm on marketing surfaces */

  /* --- Radius ---------------------------------------------------------------
     AUDIT: 10 distinct radii shipped (5, 8, 11, 12, 13, 16, 22, 24, 99, 999) —
     including 22 and 24 two pixels apart, and both 99px and 999px meaning
     "round". Black Tomato runs essentially one (3px) plus circles. Three + circle. */
  --r1: 8px;    /* buttons, chips, inputs, copy fields, focus ring */
  --r2: 16px;   /* cards, action rows, toasts, disclosure rows */
  --r3: 24px;   /* hero, passport panel, modal */
  --r-pill: 999px;
  /* avatars/badges use border-radius:50% — never 11px or 13px */

  /* --- Colour ---------------------------------------------------------------
     AUDIT: 12 accent-hue families. Black Tomato spends its boldness in exactly
     one place (#E7247A on the primary CTA) across a 6,927px page. The five
     ID_HUES avatar tints actively sabotaged the status system — a brown tile
     read as a warning on a traveler whose real state was expired-red.
     Identity hues are DELETED. Status is now the only semantic colour. */
  --paper: #f3ede2;
  --paper-2: #ece4d5;
  --card: #fbf8f1;
  --card-2: #f6f1e5;
  --line: #e2d9c6;
  --line-soft: #ece5d6;

  --ink: #1b1a24;
  --ink-2: #3d3a4a;
  --muted: #5f5949;        /* 5.5:1 on paper — replaces #6b6455 */
  --muted-strong: #4a4539;

  /* The document field — the one identity surface. */
  --field-1: #2a2662;
  --field-2: #201c50;
  --field-3: #14112f;
  --field-ink: #efedff;
  --field-ink-2: #c9c4ee;
  --field-ink-3: #9a94c8;

  /* Foil: the single accent. One place per surface.
     Every ratio below is COMPUTED, not asserted — an earlier version of this
     file claimed 4.6:1 for --foil-deep when it actually measured 4.33:1.
     Re-derive with scratchpad contrast tooling before changing any of them. */
  --foil: #d7c79a;
  --foil-deep: #87671f;    /* 4.52:1 on --paper (was #8a6a20 at 4.33:1 — AA fail) */

  /* Status quartet — one system, four steps. The only other colour allowed.
     Each ink is checked against its OWN tinted chip background, which is where
     it actually appears, not against white. */
  --good: #4b754f;         /* 4.52:1 on --good-bg (was #4f7a53 at 4.21:1 — AA fail) */
  --good-bg: #e7efe4;
  --warn: #8a6118;         /* 4.70:1 */
  --warn-bg: #f5ecd8;
  --urgent: #a8462a;       /* 4.84:1 */
  --urgent-bg: #f7e6dd;
  --expired: #8d3125;      /* 6.39:1 */
  --expired-bg: #f6e0dc;
  --dim: #6f685a;          /* 4.56:1 on --dim-bg (was #8b8371 at 3.11:1 — AA fail) */
  --dim-bg: #efe9dc;

  /* --- Elevation ------------------------------------------------------------
     AUDIT: the shadow system was the design's strongest craft — consistent top
     light, warm umbra for paper, cool indigo for the document object. Black
     Tomato's own CSS carries 13+ ad-hoc shadows with contradictory light
     directions. Kept verbatim; do not add a fourth. */
  --sh1: 0 1px 2px rgba(40, 32, 12, .05), 0 2px 8px rgba(40, 32, 12, .04);
  --sh2: 0 2px 4px rgba(40, 32, 12, .06), 0 8px 20px rgba(40, 32, 12, .07);
  --sh-doc: 0 26px 64px -26px rgba(20, 16, 44, .55);

  /* --- Motion ---------------------------------------------------------------
     AUDIT: durations (0.15-0.28s) were judged CORRECT for a utility — Black
     Tomato's 0.5s would read as lag on a dashboard button. The defect was
     coverage holes and unscoped `transition: .15s` shorthands, not speed.
     Two roles: --ease for movement, plain ease for fades. Never mix. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .15s;
  --t-mid: .2s;
  --t-slow: .28s;
}

/* ---------------------------------------------------------------------------
   Reset + base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* AUDIT: body and small metadata carried zero tracking while Black Tomato
   tracks body +0.85px and labels +1.2-3px. Applied to small text only —
   Figtree at 16px does not need it and would go gappy. */
.t-sm, .t-xs, small { letter-spacing: .01em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: var(--opsz-display);
  font-weight: var(--w-bold);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-h1); line-height: 1.03; }
h2 { font-size: var(--t-h2); line-height: 1.2; }

p { text-wrap: pretty; }

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

img, video { max-width: 100%; display: block; }

/* Two-tone focus ring. A single colour cannot clear WCAG 2.4.11's 3:1 against
   both grounds this system uses: --field-1 measures 1.35:1 on the indigo
   footer/portal ground, and --foil measures 1.44:1 on paper. So the ring is a
   foil core inside a dark halo — the core carries the dark surfaces (10.88:1),
   the halo carries the light ones. One of the two is always visible. */
:focus-visible {
  outline: 2px solid var(--foil);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--field-1);
  border-radius: var(--r1);
}

/* Uppercase labels. Tracking in em so it scales with size — the prototype got
   this right and it is kept. */
.over {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tnum { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }

/* ---------------------------------------------------------------------------
   Buttons — one shape language, property-scoped transitions.
   AUDIT: three interactive controls shipped with NO hover state at all, and
   .copy chips snapped with `transition: all 0s`. Every interactive element
   below carries a hover state and names the properties it animates.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-md);
  font-weight: var(--w-bold);
  text-decoration: none;   /* .btn is used on <a> as well as <button> */
  transition: background-color var(--t-fast) ease,
              border-color var(--t-fast) ease,
              color var(--t-fast) ease;
}
.btn:hover { background: var(--card-2); border-color: var(--muted); }

.btn-primary {
  background: var(--field-1);
  border-color: var(--field-1);
  color: var(--field-ink);
}
.btn-primary:hover { background: var(--field-2); border-color: var(--field-2); }

/* The one place foil is allowed to be a filled surface. */
.btn-foil {
  background: var(--foil);
  border-color: var(--foil);
  color: var(--field-3);
}
.btn-foil:hover { background: #c9b585; border-color: #c9b585; }

.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------------------
   Full-bleed closing band.
   AUDIT (flagged BLOCKER by two independent lenses): the page had no ending —
   139px of blank paper and no footer element of any kind, which read as "the
   page didn't finish loading". Black Tomato lands on a full-bleed CTA band
   then a dark footer. All three surfaces use this.
   ------------------------------------------------------------------------- */
.site-foot {
  background: var(--field-3);
  color: var(--field-ink-2);
  padding: var(--s6) var(--s4);
  margin-top: var(--s6);
}
.site-foot .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-sm);
}
.site-foot a {
  text-decoration: none;
  opacity: .8;
  transition: opacity var(--t-fast) ease;
}
.site-foot a:hover { opacity: 1; }
.site-foot nav { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Reduced motion.
   AUDIT: the prototype's RM fallback was specificity-dead — the static route
   rules (2 classes) lost to .route.route-animate .flown (3 classes), so the
   central data display silently VANISHED for reduced-motion users, and the
   view-transition crossfade still ran because `*` never matches UA
   pseudo-elements. Both closed here.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}