/* Preflight design tokens — the palette contract for the whole product.
 *
 * THE RULE THIS FILE EXISTS TO ENFORCE:
 *
 *   --fd-*  (flight deck)  belongs to instruments.  PFD, MFD, trainer panel.
 *   --ui-*  (product)      belongs to everything else. Menu, index, brief.
 *
 * A product surface may not use --fd-*, and styles.check.js fails the build
 * if one does.
 *
 * Why the split is worth a gate: on the panel, colour is MEANING, not taste.
 * Green is an ACTIVE mode, white is an ARMED one, magenta is GPS course,
 * cyan is pilot-selectable, amber is caution — all sourced from the G1000
 * NXi Pilot's Guide and asserted in avionics/colors.check.js. When the menu
 * borrowed that palette to tint a difficulty pill, "beginner" rendered in
 * exactly the green that means a captured autopilot mode. That is not a
 * cosmetic collision. It teaches a student the wrong thing about the one
 * visual language the airplane actually uses, on the first screen they see.
 *
 * The menu's original stylesheet said, in a comment, that it copied the
 * instrument palette so the app would "read as the same tool, not a
 * different app." The instinct was right and the result was wrong: the goal
 * was coherence and what arrived was sameness — every screen flat, the same
 * two accents everywhere, nothing able to look more important than anything
 * else. Coherence now comes from shared TYPE, SPACING and ELEVATION here,
 * which is where it should have come from, leaving colour free to mean one
 * thing on the panel and something else entirely in the product.
 *
 * No @import and no url() to any host. The offline gate (check.sh) is a
 * product promise: this thing works in a hangar with no signal. Type is the
 * system stack for that reason — a webfont CDN would be a network call on
 * first paint.
 */

:root {
  /* ---- Product surface: ground + elevation ------------------------------
     Four steps, not two. The old menu had exactly one panel colour on one
     background, which is why every card carried identical visual weight and
     the eye had nowhere to land. Depth is what lets a layout say "start
     here" without shouting. */
  --ui-bg:          #0e1116;
  --ui-bg-elev:     #12171e;
  --ui-surface:     #161c24;
  --ui-surface-2:   #1d242e;
  --ui-surface-3:   #252e3a;

  /* Hairlines. -strong is for a focused or hovered edge, not decoration. */
  --ui-line:        #242d38;
  --ui-line-strong: #36424f;

  /* ---- Ink: a real four-step ramp --------------------------------------
     The old palette had --ink and --dim and nothing between, so every
     secondary string — teaches text, durations, phase, difficulty, the
     footer — landed on the identical grey and competed at identical weight.
     Hierarchy is mostly this ramp doing its job. */
  --ui-ink:         #e9eef5;
  --ui-ink-2:       #aebbcb;
  --ui-ink-3:       #7b8a9c;
  --ui-ink-4:       #56637380;

  /* ---- Accent: exactly one, chosen to sit OUTSIDE the instrument set ----
     Deliberately not instrument cyan (#4fd2ff): a product blue that could be
     mistaken for a pilot-selectable value at a glance would reintroduce the
     collision this file exists to prevent. This is bluer and deeper — it
     reads as software chrome, never as an annunciation. */
  --ui-accent:      #5c8cff;
  --ui-accent-ink:  #a9c3ff;
  --ui-accent-dim:  #2f4a8f;
  --ui-accent-wash: rgba(92, 140, 255, .10);
  --ui-accent-line: rgba(92, 140, 255, .38);

  /* Phase-of-flight tinting. Descriptive, low-saturation, and NOT the
     instrument amber (#ffb03a) that means caution on the panel. */
  --ui-ground:      #7fb2a3;
  --ui-air:         #9a8fd8;

  /* ---- Type ------------------------------------------------------------
     Sans for product surfaces; mono is retained ONLY for data a pilot reads
     as characters — squawk codes, frequencies, altimeter settings, runway
     identifiers. Mono on prose was most of why the menu read as a terminal
     rather than a product. */
  --ui-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "Segoe UI", Roboto, system-ui, sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Display sizes carry negative tracking; small caps-y labels carry
     positive. That contrast is doing a lot of the "designed" work. */
  --ui-t-display: 600 30px/1.15 var(--ui-font);
  --ui-t-title:   600 19px/1.3  var(--ui-font);
  --ui-t-body:    400 14.5px/1.6 var(--ui-font);
  --ui-t-small:   400 13px/1.55 var(--ui-font);
  --ui-t-label:   600 10.5px/1 var(--ui-font);
  --ui-track-display: -.021em;
  --ui-track-label:    .15em;

  /* ---- Shape + depth ---------------------------------------------------
     Shadows are what separate a card from a box with a border. The old menu
     had none at all. */
  --ui-r-sm: 8px;
  --ui-r-md: 12px;
  --ui-r-lg: 16px;
  --ui-r-xl: 22px;
  --ui-r-pill: 999px;

  --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ui-shadow-md: 0 4px 14px rgba(0,0,0,.34);
  --ui-shadow-lg: 0 18px 44px rgba(0,0,0,.46);
  --ui-shadow-accent: 0 10px 34px rgba(92,140,255,.20);

  /* A 1px top highlight. Cheap, and the single biggest reason a dark card
     stops looking flat. */
  --ui-sheen: inset 0 1px 0 rgba(255,255,255,.05);

  /* ---- Spacing: a 4px scale, so nothing is eyeballed ------------------- */
  --ui-s1: 4px;  --ui-s2: 8px;  --ui-s3: 12px; --ui-s4: 16px;
  --ui-s5: 24px; --ui-s6: 32px; --ui-s7: 48px; --ui-s8: 72px;

  --ui-maxw: 1080px;

  /* Touch floor. DECLARED, never computed — a computed height is a lower
     bound and a gate that measures one produces false greens. */
  --ui-touch: 44px;
}

/* ---- Reset shared by every product surface ---------------------------- */
.pf-root, .pf-root * { box-sizing: border-box; }

.pf-root {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font: var(--ui-t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient depth. Two very soft radial washes so the page has a light source
   instead of being a flat fill — fixed, so it does not travel on scroll. */
.pf-root::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(92,140,255,.09), transparent 62%),
    radial-gradient(880px 520px at 96% 4%,   rgba(127,178,163,.05), transparent 58%);
}
.pf-root > * { position: relative; z-index: 1; }

/* ---- Primitives ------------------------------------------------------- */
.pf-shell { max-width: var(--ui-maxw); margin: 0 auto; padding: 0 var(--ui-s5) var(--ui-s8); }

.pf-label {
  font: var(--ui-t-label); letter-spacing: var(--ui-track-label);
  text-transform: uppercase; color: var(--ui-ink-3);
}

.pf-card {
  background: linear-gradient(180deg, var(--ui-surface), var(--ui-bg-elev));
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-shadow-md), var(--ui-sheen);
}

.pf-mono { font-family: var(--ui-font-mono); font-variant-numeric: tabular-nums; }

/* Every interactive control DECLARES the 44pt floor. */
.pf-tap { min-height: var(--ui-touch); }

.pf-focus:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: var(--ui-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .pf-root *, .pf-root *::before, .pf-root *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}