/* Vermillion Avionics design tokens, shared by the landing page (b/) and the playtest page. Mirrored 1:1 in HUD_SPEC.md. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* colour: surfaces */
  --vx-void: #05070B;
  --vx-deep: #0A0E14;
  --vx-panel: rgba(9, 13, 19, 0.78);
  --vx-panel-solid: #0B1017;
  --vx-scrim: rgba(5, 7, 11, 0.72);
  /* colour: ink (ivory) */
  --vx-ink: #ECE7DC;
  --vx-ink-2: rgba(236, 231, 220, 0.76);
  --vx-ink-3: rgba(236, 231, 220, 0.56);
  --vx-line: rgba(236, 231, 220, 0.16);
  --vx-line-2: rgba(236, 231, 220, 0.30);
  --vx-grid: rgba(236, 231, 220, 0.045);
  /* colour: signal roles */
  --vx-ice: #A9DCEF;
  --vx-ice-fill: rgba(169, 220, 239, 0.12);
  --vx-ore: #E2C38D;
  --vx-ok: #93D9A4;
  --vx-caution: #F2B35E;
  --vx-threat: #F04A32;
  --vx-threat-ink: #FF8C76;
  --vx-threat-fill: rgba(240, 74, 50, 0.12);
  --vx-brand: #E34234;
  /* colour: security tiers */
  --vx-sec-secure: var(--vx-ice);
  --vx-sec-high: var(--vx-ok);
  --vx-sec-low: var(--vx-caution);
  --vx-sec-lawless: var(--vx-threat);

  /* type */
  --vx-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --vx-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --vx-stretch-display: 68%;
  --vx-stretch-head: 74%;
  --vx-fs-display: clamp(44px, 5.4vw, 92px);
  --vx-fs-display-md: clamp(36px, 4vw, 64px);
  --vx-fs-headline: clamp(32px, 3.4vw, 56px);
  --vx-fs-title: 24px;
  --vx-fs-body: 17px;
  --vx-fs-small: 14px;
  --vx-fs-label: 12px;
  --vx-fs-micro: 11px;
  --vx-fs-readout: 15px;
  --vx-fs-readout-lg: 30px;
  --vx-track-label: 0.16em;
  --vx-track-display: -0.005em;

  /* geometry */
  --vx-hair: 1px;
  --vx-stroke: 1.5px;
  --vx-bracket: 10px;
  --vx-bracket-lg: 22px;
  --vx-cut: 12px;
  --vx-tick-minor: 4px;
  --vx-tick-major: 8px;
  --vx-u: 4px;
  --vx-pad: 20px;
  --vx-gap: 24px;

  /* motion */
  --vx-ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --vx-ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);
  --vx-ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --vx-t-fast: 120ms;
  --vx-t-base: 240ms;
  --vx-t-slow: 520ms;
  --vx-t-boot: 1100ms;
  --vx-t-sweep: 4000ms;
  --vx-t-ping: 1400ms;
  --vx-t-stagger: 70ms;
}
[data-tier="secure"] { --c: var(--vx-sec-secure); }
[data-tier="high"] { --c: var(--vx-sec-high); }
[data-tier="low"] { --c: var(--vx-sec-low); }
[data-tier="lawless"] { --c: var(--vx-sec-lawless); }