/* uplift-foundation.css — Starforge UI Uplift · BATCH 1 (Foundation)
 * Source of truth: docs/design-system/uplift-2026-07/UPLIFT-HANDOFF.md (Style
 * Bible v1 §§0-8 + TILE-VOICE PATTERN). Canonical treatments ported from the
 * design-session implementations uplift/hub-v4.css + hub-v5.css + s35.css.
 *
 * ADDITIVE GUARANTEE: this file changes NOTHING about the current live UI.
 * - @font-face rules only take effect when a --u-* font stack is referenced.
 * - :root declarations are all namespaced --u-* (zero collisions with tokens.css).
 * - Every rendering selector is scoped to an opt-in .u-* class or body.u-base.
 * Load order: AFTER styles/tokens.css (it consumes --violet-line etc. with
 * literal fallbacks so it also survives standalone loading).
 */

/* ═══ a) FONTS — Style Bible §3 type tiers ═══════════════════════════════ */
@font-face {
  font-family: "Michroma";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url(../fonts/Michroma-400.woff2) format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 500; font-style: normal; font-display: swap;
  src: url(../fonts/ChakraPetch-500.woff2) format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-weight: 600; font-style: normal; font-display: swap;
  src: url(../fonts/ChakraPetch-600.woff2) format("woff2");
}

/* ═══ b) TOKENS — all namespaced --u-* (additive; nothing reads them until
 *      an opt-in class does) ═════════════════════════════════════════════ */
:root {
  /* — M6 Nebula Toned base (Style Bible §1) — */
  --u-bg: #040610;                            /* was #04050c */
  --u-bg2: #080b1e;                           /* was #070a18 */
  --u-ink3: #7078a4;                          /* was #6b7099 — contrast on plate art */
  --u-wash-violet: rgba(139, 139, 255, .12);  /* wash violet .10 → .12 */
  --u-wash-cyan: rgba(54, 214, 224, .08);     /* wash cyan .06 → .08 */

  /* — G3 liquid glass recipe (Style Bible §2; ported from hub-v4 .lg) — */
  --u-glass-grad: linear-gradient(160deg, rgba(180, 190, 255, .10), rgba(140, 150, 210, .04) 45%, rgba(54, 214, 224, .05));
  --u-glass-blur: blur(14px) saturate(150%);
  --u-glass-rim-top: rgba(255, 255, 255, .22);   /* inset rim, top */
  --u-glass-rim-bot: rgba(120, 140, 255, .10);   /* inset rim, bottom */
  --u-glass-shadow: 0 14px 34px -18px rgba(0, 0, 0, .8);
  --u-r: 15px;                                   /* uplift tile radius */

  /* — motion easings (Style Bible §4, MO4 context mix) — */
  --u-ease-calm: cubic-bezier(.4, 0, .2, 1);     /* reading surfaces, 150/320ms */
  --u-ease-juice: cubic-bezier(.34, 1.56, .5, 1);/* game affordances only */
  --u-ease-cine: cubic-bezier(.2, .6, .2, 1);    /* ceremonies + backgrounds */

  /* — type stacks (Style Bible §3: T1 zone/brand · T2 HUD) — */
  --u-font-zone: "Michroma", sans-serif;
  --u-font-hud: "Chakra Petch", sans-serif;

  /* — plate art (Style Bible §1: everyday-surface plates) — */
  --u-plate: url(../assets/plate-yard.png);
}

/* ═══ c) BASE — body.u-base opt-in (Style Bible §1 · M6 Nebula Toned) ════ */
/* Flips the page onto the M6 base: colder deeper gradient + washes at the new
 * intensities (violet .12 top-left / cyan .08 bottom-right, per hub-v4 .wa
 * geometry). Also re-points the live --bg/--bg2/--ink3 tokens for descendants
 * — still opt-in, since nothing has .u-base today. */
body.u-base {
  --bg: var(--u-bg);
  --bg2: var(--u-bg2);
  --ink3: var(--u-ink3);
  background:
    radial-gradient(560px 380px at 14% 12%, var(--u-wash-violet), transparent 62%),
    radial-gradient(500px 340px at 88% 90%, var(--u-wash-cyan), transparent 62%),
    linear-gradient(180deg, var(--u-bg), var(--u-bg2) 55%, var(--u-bg));
  background-attachment: fixed;
}

/* body.u-base.u-plate — plate art at .32 under the scrim (Style Bible §1).
 * ::before = the plate layer (fixed, image via --u-plate; replaces the tokens.css
 *            starfield ::before while active — the plate IS the field).
 * ::after  = washes + scrim riding OVER the plate (ported from hub-v4 .f4bg .wa).
 * Negative z-index keeps both under content; they still paint above the page
 * background because body's background propagates to the canvas. */
body.u-base.u-plate::before {
  content: "";
  position: fixed;
  inset: -3%;                       /* hub-v4 .pl — headroom for the 14s parallax */
  z-index: -2;
  pointer-events: none;
  background: var(--u-plate) center / cover no-repeat;
  opacity: .32;
}
body.u-base.u-plate::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 380px at 14% 12%, var(--u-wash-violet), transparent 62%),
    radial-gradient(500px 340px at 88% 90%, var(--u-wash-cyan), transparent 62%),
    linear-gradient(180deg, rgba(4, 6, 16, .6), rgba(4, 6, 16, .42) 40%, rgba(4, 6, 16, .7));
}

/* ═══ d) TILE VOICES — TILE-VOICE PATTERN + Style Bible §2 ═══════════════ */

/* .u-glass — G3 true liquid glass (stations / stage tiles, hot OR cold).
 * Ported from hub-v4 .lg; specular streak on ::after (115° white .075). */
.u-glass {
  position: relative;
  overflow: hidden;
  border-radius: var(--u-r);
  background: var(--u-glass-grad);
  -webkit-backdrop-filter: var(--u-glass-blur);
  backdrop-filter: var(--u-glass-blur);
  box-shadow:
    inset 0 1px 0 var(--u-glass-rim-top),
    inset 0 -1px 0 var(--u-glass-rim-bot),
    var(--u-glass-shadow);
}
.u-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .075) 42%, rgba(255, 255, 255, .02) 50%, transparent 60%);
}

/* .u-glass--hot — hero-while-hot: accent ring + glow + (consumer bumps name
 * size); NEVER a larger footprint (Surface 1 lock). Set --u-accent (ring) +
 * --u-accent-glow (bloom) to the zone voice; defaults = violet affordance. */
.u-glass--hot {
  box-shadow:
    inset 0 1px 0 var(--u-glass-rim-top),
    inset 0 -1px 0 var(--u-glass-rim-bot),
    inset 0 0 0 1px var(--u-accent, var(--violet-line, rgba(139, 139, 255, .25))),
    0 0 26px -14px var(--u-accent-glow, var(--violet, #8b8bff)),
    var(--u-glass-shadow);
}

/* .u-frost — quiet frost (bulletins, dashboards, presence, status bands):
 * no rim, no streak. Fallback voice for reduced-glass contexts (G2). */
.u-frost {
  position: relative;
  border-radius: var(--u-r);
  background: rgba(140, 150, 210, .05);
  border: 1px solid rgba(150, 160, 220, .15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* .u-action — tinted-fill idiom (the source's Open/Raise): voice tint .15 →
 * dark at 72%, matching 1px border. Ported from hub-v5 .fill. */
.u-action {
  position: relative;
  overflow: hidden;
  border-radius: var(--u-r);
  border: 1px solid var(--u-tint-line, var(--violet-line, rgba(139, 139, 255, .25)));
  background: linear-gradient(160deg, var(--u-tint, rgba(54, 214, 224, .15)), rgba(8, 11, 24, .62) 72%);
  cursor: pointer;
}
.u-action--teal { --u-tint: rgba(95, 208, 160, .15); --u-tint-line: rgba(95, 208, 160, .35); }  /* open / product */
.u-action--gold { --u-tint: rgba(255, 196, 110, .15); --u-tint-line: rgba(255, 210, 122, .4); }  /* command ceremony */
.u-action--zone { --u-tint: var(--u-zone-dim, rgba(139, 167, 255, .10)); --u-tint-line: var(--u-zone-line, rgba(139, 167, 255, .34)); } /* zone actions */

/* ═══ e) TYPE TIERS — Style Bible §3 ═════════════════════════════════════
 * T1 zone titles / brand / ceremony plates — Michroma, ALL-CAPS ONLY, ≥14px.
 * T2 HUD (station names, numbers, buttons) — Chakra Petch 600 (500 loaded too).
 * T3 body (Geist 400 13px) + T4 data/micro (Geist Mono 600 10.5px .16em — the
 * tokens.css .cap idiom) are UNCHANGED — no uplift class needed. */
.u-t1 {
  font-family: var(--u-font-zone);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.u-t2 {
  font-family: var(--u-font-hud);
  font-weight: 600;
}
.u-t2-num {
  font-family: var(--u-font-hud);
  font-weight: 600;
  font-size: 22px;                 /* hub-v4 dashboard numerals */
  font-variant-numeric: tabular-nums;
}

/* ═══ f) STATE TRIO — .u-loading / .u-empty / .u-error (recon B8) ════════
 * ONE consistent voice for the three transient tile states, replacing the
 * ad-hoc inline style="color:…" markup scattered across surfaces. TONE-ONLY
 * by design: components keep their own type scale/layout; the trio pins the
 * state colour (+ a quiet pulse while loading). `!important` is deliberate —
 * the voice must beat component row selectors (e.g. .o3-opscard .row sets
 * color at 0,2,0) and stand in for the inline styles it replaces. */
.u-loading { color: var(--ink3, #6b7099) !important; }
.u-empty { color: var(--ink3, #6b7099) !important; }
.u-error { color: #ff7a90 !important; } /* the codebase's fault tone (loud-honest, not heat) */

/* ═══ f2) CREW-COST CHIP — recon B3 ══════════════════════════════════════
 * The WO's minted crew (mission Envoys) + committed $/mo, wherever WOs render
 * (Floor rows · station tiles · Oversight status tile). fmt.crewCostChip emits
 * it; absent crew = no chip (honest empty). Built/teal voice = economic fact. */
.u-costchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  border: 1px solid rgba(95, 198, 158, .32);
  background: rgba(95, 198, 158, .08);
  color: var(--built, #5fc69e);
  font: 600 9.5px var(--mono, monospace); letter-spacing: .04em;
  text-transform: none; white-space: nowrap;
}

/* ═══ g) MOTION UTILITIES — Style Bible §4 (MO4) ═════════════════════════
 * ALL animation/transition rules live inside the no-preference gate; with
 * reduced motion the utilities are inert (state changes still legible). */
@media (prefers-reduced-motion: no-preference) {

  /* the loading voice breathes — inert under reduced motion (state still legible) */
  @keyframes u-state-pulse {
    from { opacity: .55; }
    to { opacity: 1; }
  }
  .u-loading { animation: u-state-pulse 1.1s var(--u-ease-calm) infinite alternate; }

  /* action-tile juice (TILE-VOICE PATTERN: hover 1.03 / press .94) */
  .u-action { transition: transform .28s var(--u-ease-juice); }
  .u-action:hover { transform: scale(1.03); }
  .u-action:active { transform: scale(.94); }

  /* .u-juice — arcade juice for GAME AFFORDANCES ONLY (Begin/join/vote/ready):
   * hover 1.07, press squash .88 (hub-v4 .enter4/.begin4 idiom). */
  .u-juice {
    transition: transform .28s var(--u-ease-juice), box-shadow .2s var(--u-ease-calm), background .15s var(--u-ease-calm), filter .15s var(--u-ease-calm);
  }
  .u-juice:hover { transform: scale(1.07); }
  .u-juice:active { transform: scale(.88); }

  /* .u-arrive — ZONE ARRIVAL BEAT (recon B9): a subtle sub-second reform/travel
   * settle when a surface is ENTERED (Oversight / Floor / shipyard). CSS-only —
   * views add the class only on a genuine surface change (not live re-renders),
   * so the beat reads as travel, never as flicker. Inert under reduced motion
   * (this whole block is inside the no-preference gate). */
  @keyframes u-arrive {
    from { opacity: 0; transform: translateY(7px) scale(.992); filter: saturate(.75) brightness(.92); }
    60% { filter: saturate(1.06) brightness(1.02); }
    to { opacity: 1; transform: none; filter: none; }
  }
  .u-arrive { animation: u-arrive .55s var(--u-ease-cine) both; }

  /* .u-parallax — the 14s cinematic drift for plate layers (hub-v4 plate14) */
  @keyframes u-parallax {
    from { transform: scale(1); }
    to { transform: scale(1.05) translateX(-.8%); }
  }
  .u-parallax { animation: u-parallax 14s ease-in-out infinite alternate; }

  /* the body plate layer drifts too — backgrounds are cinematic by default */
  body.u-base.u-plate::before { animation: u-parallax 14s ease-in-out infinite alternate; }
}