/* ============================================================
   Sunrise Heights Auction — design system
   One token set, three surfaces. Team colours are the only
   other chroma allowed on the stage.
   ============================================================ */

:root {
  /* Stage — the broadcast ground */
  --stage-0: #080905;
  --stage-1: #0e1009;
  --stage-2: #15180d;
  --stage-3: #1e2213;
  --line: #2a2e1a;
  --line-soft: #1d2012;

  /* Ink */
  --ink: #f4f0dc;
  --ink-2: #b8b79b;
  --ink-3: #7e806a;
  --ink-4: #55573f;

  /* Accent — auction gold */
  --gold: #d9a441;
  --gold-hi: #f0c66f;
  --gold-lo: #8a6416;
  --gold-wash: rgba(217, 164, 65, 0.12);

  /* Semantic */
  --live: #d9a441;
  --warn: #e0913c;
  --crit: #d4573f;
  --good: #6fbb85;

  /* Light surfaces — console & paddle */
  --paper-0: #f7f5ee;
  --paper-1: #ffffff;
  --paper-2: #eeebdf;
  --paper-3: #e2ddcb;
  --edge: #d8d2be;
  --edge-2: #beb69c;
  --text: #1a1c14;
  --text-2: #55584a;
  --text-3: #868975;

  /* Type */
  --display: "Avenir Next Condensed", "Futura", "Helvetica Neue", Impact, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --num: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --swift: 240ms;
  --slide: 480ms;

  --radius: 10px;
  --radius-lg: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--num);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }

/* Generated portrait card ------------------------------------- */
.portrait {
  position: relative;
  overflow: hidden;
  background: var(--stage-2);
  display: block;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait svg { width: 100%; height: 100%; display: block; }

/* Scene machinery --------------------------------------------- */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}