/*
 * Mardi Gras World brand tokens.
 * Color values from the 2026 brand guide. This is the whole approved palette,
 * teal and lime included, so any new color in the launcher or a mode must
 * come from the primary, secondary and tertiary sets below rather than a
 * one-off hex. The fleet reads as one product only if it stays that way.
 */
/* ---- Brand faces -----------------------------------------------------------
   Futura is the LICENSED face (Futura Std, OpenType CFF): Book 400, Medium
   500, Bold 700. There is no heavier cut yet, so the 800/900 that headings ask
   for resolve to Bold — an Extra Bold file added here at 800 takes those over
   with no other change. The .otf files ship as supplied: Chromium reads
   OpenType directly, and they are only ~44 KB each.

   Rooney is still a STAND-IN. Bitter (SIL OFL 1.1, a low-contrast slab serif
   with a similar color on the page) fills in until the licensed Rooney arrives.
   To swap it, drop the files in fonts/ and add @font-face blocks naming them
   "Rooney" — the body stack already lists the licensed name first.

   Everything is self-hosted rather than pulled from a CDN or an Adobe Fonts
   web project: the kiosk must render correctly with no network, and it has
   lost DNS before. See fonts/README.md. */
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/bitter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/bitter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Primary */
  --mgw-purple: #662D91;       /* 102/45/145 */
  --mgw-green: #00723A;        /* 0/114/58 */
  --mgw-yellow: #F2B221;       /* 242/178/33 */

  /* Secondary */
  --mgw-light-purple: #9E509D; /* 158/80/157 */
  --mgw-teal: #00A69D;         /* 0/166/157 */
  --mgw-lime: #8FC73E;         /* 143/199/62 */
  --mgw-light-grey: #9A9A9B;
  --mgw-dark-grey: #666766;

  /* Tertiary */
  --mgw-ochre: #CA8216;        /* 202/130/22 */
  --mgw-orange: #F3822D;       /* 243/130/45 */

  /* Semantic — every instruction, button label, and note on the fleet is
     yellow, so it gets a name of its own rather than being spelled
     --mgw-yellow at each call site. */
  --mgw-instruction: var(--mgw-yellow);

  /* Surfaces — tuned for kiosk visibility */
  --mgw-bg: #1B0A2E;          /* deep purple-black for kiosk background */
  --mgw-surface: #2A1248;     /* card/tile surface */
  --mgw-surface-2: #3A1A60;   /* elevated surface */
  --mgw-ink: #FFFFFF;
  --mgw-ink-dim: rgba(255, 255, 255, 0.72);
  /* Bumped from 0.45 → 0.6 so small UI text (status footer, kiosk tag,
     "loading…" letterspacing) clears WCAG AA 4.5:1 against the deep
     purple surface instead of hovering near the threshold. */
  --mgw-ink-faint: rgba(255, 255, 255, 0.6);
  --mgw-divider: rgba(255, 255, 255, 0.08);

  /* Type — three roles, per the 2026 brand guide:
       heading     Futura, ALL CAPS
       subheading  Futura, mixed case
       body        Rooney, mixed case
     --mgw-font-display is an alias of the heading stack, kept so its existing
     call sites (about two dozen) need no rename; they are all
     heading/subheading contexts, so Futura is the intended face for them.

     Licensed names lead each stack: Futura is bundled; Rooney is not yet, so
     the Bitter stand-in renders body text until it is. System fallbacks last
     (they also cover the few characters Futura Std lacks). See the
     @font-face block at the top of this file. */
  --mgw-font-heading: "Futura", "Futura PT", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  --mgw-font-body: "Rooney", "Rooney Sans", "Bitter", Georgia, "Times New Roman", serif;
  --mgw-font-display: var(--mgw-font-heading);

  /* Depth surfaces — intentionally a touch darker than --mgw-bg to give the
     launcher Spotlight stage and the idle/attract screen more depth. The rail
     gradient runs --mgw-rail-top → --mgw-rail-bottom. */
  --mgw-bg-deep: #140720;
  --mgw-rail-top: #20103A;
  --mgw-rail-bottom: #160A26;

  /* Radii / shadow */
  --mgw-radius-md: 1rem;       /* 16px — icon tiles, small controls */
  --mgw-radius-lg: 1.5rem;     /* 24px — cards, rail items, panels */
  --mgw-radius-pill: 999px;    /* every touch control is a pill */
  --mgw-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --mgw-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--mgw-font-body);
  background: var(--mgw-bg);
  color: var(--mgw-ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* Headings — Futura, ALL CAPS. Caps need looser tracking than mixed case to
   stay readable at kiosk distance, hence the bump from 0.005em. Uppercasing is
   done in CSS, not in the copy, so screen readers and the source strings keep
   their natural casing. */
h1, h2, h3 {
  font-family: var(--mgw-font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1; /* per brand guide: headlines at 1.1× */
}

/* Body — Rooney, mixed case. */
p {
  font-family: var(--mgw-font-body);
  text-transform: none;
  line-height: 1.3; /* per brand guide: body at 1.3× */
}

/* Instructions, button labels, and notes are yellow fleet-wide. Add
   .mgw-instruction to the element rather than restating the hex. */
.mgw-instruction {
  color: var(--mgw-instruction);
}

/* Honor the OS-level "reduce motion" setting. Disables decorative
   animations across the launcher and all modes — visitors with
   vestibular sensitivity, dev tools, or a need for static UI get a
   calm experience without losing functionality. The 3D model's
   auto-rotate is intentionally NOT covered here: that's content, not
   chrome, and it can be toggled via the Spin button on the viewer. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Shared kiosk motion ---------------------------------------------------
   Shared decorative keyframes: mgw-float (launcher placeholder) and
   mgw-attract (STL viewer family pill). Namespaced (mgw-*) so they never
   collide with per-mode keyframes. Neutralized by the reduced-motion block
   above. */

/* Slow vertical bob for the floating sculpt placeholder / hero art. */
@keyframes mgw-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* Expanding yellow halo ring — draws the eye to a control. */
@keyframes mgw-attract {
  0%, 100% { box-shadow: var(--mgw-shadow-md), 0 0 0 0 rgba(242, 178, 33, 0); }
  50%      { box-shadow: var(--mgw-shadow-md), 0 0 0 22px rgba(242, 178, 33, 0.16); }
}