/* Alien ME — HUD tokens (premium consistency) */
:root{
  --am-bg: rgba(10,12,18,.76);
  --am-bg-strong: rgba(10,12,18,.88);
  --am-border: rgba(255,255,255,.16);
  --am-border-soft: rgba(255,255,255,.12);
  --am-text: rgba(234,242,255,.92);
  --am-text-dim: rgba(234,242,255,.68);
  --am-radius-pill: 999px;
  --am-radius-card: 18px;
  --am-shadow: 0 18px 60px rgba(0,0,0,.55);
  --am-shadow-strong: 0 22px 80px rgba(0,0,0,.65);
  --am-tr: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.am-hud-btn{
  border:1px solid var(--am-border);
  background: rgba(255,255,255,.06);
  color: var(--am-text);
  border-radius: var(--am-radius-pill);
  padding: 6px 10px;
  cursor:pointer;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.92;
  transition: var(--am-tr);
}
.am-hud-btn:hover{ opacity:1; background: rgba(255,255,255,.08); }
.am-hud-btn:active{ transform: translateY(1px); }
.am-hud-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.am-fab{
  border:1px solid var(--am-border) !important;
  background: var(--am-bg) !important;
  color: var(--am-text) !important;
  box-shadow: var(--am-shadow) !important;
  transition: var(--am-tr) !important;
}
.am-panel{
  border:1px solid var(--am-border-soft) !important;
  background: var(--am-bg-strong) !important;
  box-shadow: var(--am-shadow-strong) !important;
}

:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid rgba(92,198,255,.55);
  outline-offset:2px;
}


/* ===============================
   Patch 26 — Canonical semantic design tokens
   Additive only. Backward compatible.
   =============================== */
:root{
  --am-color-bg: var(--bg, #05070e);
  --am-color-bg-soft: color-mix(in srgb, var(--am-color-bg) 88%, #0c1020 12%);
  --am-color-surface-1: rgba(8,18,38,.72);
  --am-color-surface-2: rgba(10,24,48,.58);
  --am-color-surface-3: rgba(255,255,255,.04);
  --am-color-text: var(--ink, rgba(234,242,255,.94));
  --am-color-text-muted: var(--muted, rgba(234,242,255,.70));
  --am-color-accent: var(--accent, #8b5cf6);
  --am-color-accent-soft: color-mix(in srgb, var(--am-color-accent) 32%, transparent);
  --am-color-border-soft: rgba(255,255,255,.10);
  --am-color-border-strong: rgba(255,255,255,.18);

  --am-radius-sm: 12px;
  --am-radius-md: 18px;
  --am-radius-lg: 24px;

  --am-shadow-soft: 0 16px 42px rgba(0,0,0,.32);
  --am-shadow-deep: 0 24px 70px rgba(0,0,0,.48);

  --am-space-1: 4px;
  --am-space-2: 8px;
  --am-space-3: 12px;
  --am-space-4: 16px;
  --am-space-5: 24px;
  --am-space-6: 32px;
  --am-space-7: 48px;
  --am-space-8: 64px;

  --am-max-content: 980px;
  --am-max-wide: 1180px;

  --am-font-display: Orbitron, Inter, system-ui, sans-serif;
  --am-font-body: Inter, system-ui, sans-serif;

  --am-text-xs: 12px;
  --am-text-sm: 14px;
  --am-text-md: 16px;
  --am-text-lg: 18px;
  --am-text-xl: 24px;
  --am-text-2xl: 34px;
  --am-text-hero: clamp(32px, 5vw, 54px);

  --am-line-tight: 1.15;
  --am-line-body: 1.65;

  --am-page-pad-x: 18px;
  --am-page-pad-y: 28px;
  --am-section-gap: clamp(20px, 3vw, 36px);

  --am-btn-bg: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  --am-btn-bg-strong: linear-gradient(135deg, color-mix(in srgb, var(--am-color-accent) 18%, transparent), rgba(255,255,255,.03));
  --am-panel-bg: linear-gradient(180deg, var(--am-color-surface-1), var(--am-color-surface-2));
  --am-panel-border: var(--am-color-border-soft);
}

/* aliases for shared template layer */
:root{
  --am-surface-1: var(--am-color-surface-1);
  --am-surface-2: var(--am-color-surface-2);
  --am-surface-3: var(--am-color-surface-3);
  --am-ink: var(--am-color-text);
  --am-muted: var(--am-color-text-muted);
  --am-accent: var(--am-color-accent);
  --am-border-soft-token: var(--am-color-border-soft);
  --am-border-strong-token: var(--am-color-border-strong);
}