/* A metric-matched stand-in for Inter while the web font loads (2026-10-22): Arial scaled to Inter's widths and
   vertical metrics, so text wraps the same before and after the swap and nothing below it moves (layout shift). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

/* ==========================================================================
   BuildMog design tokens
   One token contract (same names as MogDrive and AttorneyMog), two themes.
   Default = "workshop": warm cream field, hologram orange accent, warm ink.
   "nightshift" = the same orange on hoodie black for dim rooms and the 3D
   player's focus mode. Switch with data-theme on <html> or any subtree.
   The palette comes from the mascot: Mog the beaver (cream background,
   orange hologram, black techwear with orange trim, beaver brown).
   ========================================================================== */

:root,
[data-theme="workshop"] {
  color-scheme: light;

  /* type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.02em;

  /* surfaces: workshop cream */
  --bg: #f7f1e4;
  --bg-2: #f0e8d7;
  --bg-elev: #fffdf8;
  --surface: rgba(255, 253, 248, 0.72);
  --surface-2: rgba(255, 253, 248, 0.92);
  --surface-solid: #fffdf8;
  --border: rgba(27, 24, 20, 0.10);
  --border-strong: rgba(27, 24, 20, 0.22);
  --glass-blur: 16px;

  /* text: warm ink */
  --text: #1b1814;
  --text-2: #5f574c;
  --text-3: #766c60; /* 4.6:1 on --bg: it carries real labels (paused, locked badges, tabs) */

  /* brand accent: hologram orange. Dark text on orange (7.8:1 measured by review M, 2026-10-22), never white. */
  --accent: #ff8a1f;
  --accent-2: #ffb547;
  --accent-ink: #1b1206;
  --accent-grad: linear-gradient(135deg, #ff7a00 0%, #ffb547 100%);
  --accent-soft: rgba(255, 138, 31, 0.14);
  --glow: rgba(255, 138, 31, 0.40);
  --focus: #1f4fd1;

  /* hologram: the part being installed, the landing rings, x-ray */
  --holo: #ff9f2e;
  --holo-core: #fff1c2;
  --holo-ring: rgba(255, 159, 46, 0.55);

  /* beaver brown: wood tones, decorative only (never text on cream) */
  --wood: #8c5a2b;
  --wood-2: #c48a4a;
  --wood-3: #e7c89a;

  /* blueprint blue: the 2D manual card, measurements, technical lines */
  --blueprint: #2457d6;
  --blueprint-paper: #eef3ff;

  /* status */
  --live: #2f8f6b;
  --warn: #c77d00;
  --danger: #d8432f;
  --danger-soft: rgba(216, 67, 47, 0.12);

  /* meters */
  --meter-track: rgba(27, 24, 20, 0.10);

  /* shape and depth (friendly, rounded, warm shadows) */
  --radius-xs: 10px;
  --radius-s: 14px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(70, 45, 10, 0.12);
  --shadow-2: 0 20px 50px rgba(70, 45, 10, 0.20);
  --shadow-glow: 0 0 0 4px var(--accent-soft), 0 12px 30px var(--glow);

  /* 3D stage frame */
  --stage-bg: #f7f1e4;
  --stage-vignette: radial-gradient(90% 70% at 50% 100%, rgba(255, 159, 46, 0.18), transparent 60%);
}

/* ---------- Nightshift: hoodie black, the same orange, cream text ---------- */
[data-theme="nightshift"] {
  color-scheme: dark;

  --bg: #14110d;
  --bg-2: #1b1712;
  --bg-elev: #231e18;
  --surface: rgba(255, 245, 230, 0.06);
  --surface-2: rgba(255, 245, 230, 0.10);
  --surface-solid: #26211a;
  --border: rgba(255, 245, 230, 0.12);
  --border-strong: rgba(255, 245, 230, 0.24);
  --glass-blur: 18px;

  --text: #f6efe3;
  --text-2: #b9ae9d;
  --text-3: #958a7b; /* 5.6:1 on --bg */

  --accent: #ff9226;
  --accent-2: #ffbe55;
  --accent-ink: #1b1206;
  --accent-grad: linear-gradient(135deg, #ff7a00 0%, #ffbe55 100%);
  --accent-soft: rgba(255, 146, 38, 0.18);
  --glow: rgba(255, 146, 38, 0.45);
  --focus: #ffbe55;

  --holo: #ffa63a;
  --holo-core: #fff4d0;
  --holo-ring: rgba(255, 166, 58, 0.60);

  --wood: #a86a34;
  --wood-2: #c48a4a;
  --wood-3: #e7c89a;

  --blueprint: #7fa2ff;
  --blueprint-paper: #1c2234;

  --live: #5fd3a0;
  --warn: #ffb547;
  --danger: #ff6f5b;
  --danger-soft: rgba(255, 111, 91, 0.16);

  --meter-track: rgba(255, 245, 230, 0.12);

  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 4px var(--accent-soft), 0 12px 36px var(--glow);

  --stage-bg: #14110d;
  --stage-vignette: radial-gradient(90% 70% at 50% 100%, rgba(255, 166, 58, 0.22), transparent 60%);
}

/* Motion contract: one easing family everywhere (shared with the family). */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
  --dur-fly: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
    --dur-fly: 0ms;
  }
}