/* ==========================================================================
   METAFLIGHT HUD - DESIGN TOKENS
   SINGLE SOURCE OF TRUTH. Loaded first on every page that uses the HUD.

   Nothing else may declare :root. If you need to tune the glass, the palette
   or the motion curve, this is the only file to touch.

   Values below are the RESOLVED ones after the homepage tuning rounds
   (scrim raised from .34 to .52 for legibility; blur reduced below 1023px
   because backdrop-filter is the main cost on integrated GPUs and mobile).
   ========================================================================== */

@font-face{font-family:'Orbitron';src:url('fonts/orbitron-var.woff2') format('woff2-variations'),url('fonts/orbitron-var.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('fonts/rajdhani-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Rajdhani';src:url('fonts/rajdhani-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrainsmono-var.woff2') format('woff2-variations'),url('fonts/jetbrainsmono-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}

:root{
  /* palette */
  --mf-void:#050810;
  --mf-cyan:#00D4FF;
  --mf-cyan-lit:#8CE8FF;
  --mf-violet:#8B5CF6;
  --mf-amber:#FFB020;
  /* DANGER (2026-09-25). Reserved for leaving or destructive actions (Log out),
     the way amber is reserved for FlightCoin. Same value as the store error
     colour, so no new hue enters the palette. Never a fill for routine UI. */
  --mf-danger:#FF5C6C;
  --mf-danger-line:rgba(255,92,108,.45);
  --mf-danger-wash:rgba(255,92,108,.10);
  /* Power glyph, monoline, drawn for this system. Used as a MASK. */
  --mf-i-power:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.6v7.6%27%2F%3E%3Cpath%20d%3D%27M7.1%206.4a7.3%207.3%200%201%200%209.8%200%27%2F%3E%3C%2Fsvg%3E');
  /* TITLE RAMP. The gradient the page H1 wears - cyan, through a mid blue,
     into violet. It is currently written out by hand in five page sheets
     (home, roles, world, pricing, about) and now also drives the Start flight
     CTA, so it lives here as one value rather than six copies that drift.
     NOTE ON VIOLET: the rule that violet marks In Development applies to
     STATUS chips. As a gradient terminus behind a title it is already the
     house treatment, which is exactly why the launch button borrows it -
     the CTA now rhymes with the headline above it instead of inventing a
     colour of its own. A previous pass added a --mf-launch blue for this and
     it has been removed: the palette did not need a seventh colour.
     Angle is set at the point of use, not here. */
  --mf-grad-title:var(--mf-cyan) 10%,#4DA6FF 52%,var(--mf-violet) 96%;
  --mf-text:#EDF6FF;
  --mf-muted:#9DB2C9;

  /* glass - neutral scrim, never navy: a navy fill on a navy page reads as a box */
  --mf-scrim:rgba(8,10,14,.52);
  --mf-veil-top:rgba(255,255,255,.055);
  --mf-veil-bot:rgba(255,255,255,.012);
  --mf-blur:blur(26px) saturate(1.5);
  --mf-frame:linear-gradient(145deg,rgba(140,232,255,.58) 0%,rgba(140,232,255,.14) 40%,rgba(139,92,246,.10) 72%,rgba(140,232,255,.28) 100%);
  --mf-hair:rgba(160,225,255,.15);

  /* type */
  --mf-mono:'JetBrains Mono',ui-monospace,monospace;

  /* geometry & motion */
  --mf-ch:16px;
  --mf-ch-sm:9px;
  --mf-ease:cubic-bezier(.22,1,.36,1);
}

@media(max-width:1023px){
  :root{--mf-blur:blur(14px) saturate(1.35)}
}

/* --------------------------------------------------------------------------
   SHARED VECTOR GLYPHS (added 2026-08-20)
   --mf-coin is a hand-authored FlightCoin token, drawn to match the real
   coin asset: gold disc, lit rim, engraved ring, airliner at 40 degrees.
   Used as a background-image (full colour), NOT as a mask. It replaces the
   flat amber dot on the World & Economy circuit and carries the value flow
   on the homepage loop, so it lives here and not in a page layer.
   --mf-jet is a monoline dart used as a MASK, so it takes the cyan accent.
   -------------------------------------------------------------------------- */
:root{
  --mf-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='fc' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFEDB4'/%3E%3Cstop offset='.42' stop-color='%23FFB020'/%3E%3Cstop offset='1' stop-color='%23C57C04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='19' fill='url(%23fc)'/%3E%3Ccircle cx='20' cy='20' r='18.3' fill='none' stroke='%23FFF6DC' stroke-opacity='.5' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='20' r='13.6' fill='none' stroke='%236B4406' stroke-opacity='.45' stroke-width='1'/%3E%3Cg transform='rotate(-40 20 20)'%3E%3Cpath d='M20 9.4c1.1 0 1.9 1.6 2.1 3.6l.3 3.7 6.8 3.9v2.1l-6.6-1.9.2 3.8 2.2 1.7v1.4l-5-1.3-5 1.3v-1.4l2.2-1.7.2-3.8-6.6 1.9v-2.1l6.8-3.9.3-3.7c.2-2 1-3.6 2.1-3.6z' fill='%236B4406'/%3E%3C/g%3E%3C/svg%3E");
  --mf-jet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.4 12 9.2 17.4l2-5.4-2-5.4z' fill='black'/%3E%3Cpath d='M9.4 11.3H2.6v1.4h6.8z' fill='black'/%3E%3C/svg%3E");
}