/* ==========================================================================
   The Market Bishop — design tokens
   Dark only. Solid background. No gradients on the page background.
   ========================================================================== */

:root {
  /* ---- Base ------------------------------------------------------------ */
  --bg:              #07060c;   /* the only background colour on the site */

  /* ---- Dusk palette ---------------------------------------------------- */
  --pink:            #fa5fc4;   /* hot pink       */
  --orchid:          #d568ab;   /* orchid         */
  --rose:            #ae3e81;   /* magenta-rose   */
  --violet:          #9e58c5;   /* electric violet*/
  --twilight:        #5e87c7;   /* twilight blue  */
  --icy:             #abc8ff;   /* icy highlight  */
  --whitehot:        #fff0ff;   /* white-hot      */
  --cyan:            #22d3ee;   /* ACCENT ONLY    */

  /* ---- Board ----------------------------------------------------------- */
  --square-dark:     #0a0612;
  --square-light:    #14101e;

  /* ---- Ink ------------------------------------------------------------- */
  --ink:             var(--whitehot);
  --ink-soft:        rgba(255, 240, 255, .72);
  --ink-muted:       rgba(171, 200, 255, .55);
  --hairline:        rgba(255, 255, 255, .14);

  /* ---- Signature gradient --------------------------------------------- */
  /* hot pink -> orchid -> violet -> twilight blue */
  --signature: linear-gradient(
    100deg,
    var(--pink)     0%,
    var(--orchid)  32%,
    var(--violet)  66%,
    var(--twilight) 100%
  );

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --track-wordmark:  .34em;   /* nav wordmark letter-spacing */
  --track-label:     .16em;   /* mono labels                 */
  --track-scroll:    .42em;   /* SCROLL                      */

  /* ---- Layout ---------------------------------------------------------- */
  --nav-h:        68px;
  --gutter:       clamp(1.15rem, 3.4vw, 2.75rem);
  /* Piece frame height. The export uses clamp(400px, 66vh, 600px), but its
     footer is only a tagline and a chevron. This hero also carries the v6
     scroll cue (board + notation + SCROLL + chevron, ~133px), so 66vh clips
     the cue below 1080. Same 600px ceiling, but the middle term is the space
     actually left over — measured chrome is ~378px, rounded up for slack.
     At viewports 995px tall and up this pins to 600px, exactly like the
     export; shorter than that it yields so the cue stays on screen. */
  --piece-h:      clamp(300px, calc(100svh - 395px), 600px);
  --board-size:   60px;       /* 5 x 12px squares   */
  --board-cells:  5;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-moon:     2s;         /* b5 -> b1 loop      */
  --dur-sweep:    3.6s;       /* SCROLL specular    */
  --dur-chevron:  2.6s;       /* chevron pulse      */
  --dur-tagline:  5s;         /* tagline hold       */
  --ease-ui:      cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {
  :root {
    --nav-h:    58px;
    /* The export has no mobile rule. The frame takes its WIDTH from the media
       (132% height x 0.884 aspect ~= 1.17x the frame height), so height alone
       will run the piece off the side of a phone. Bound it by width too. */
    --piece-h:  clamp(200px, min(34vh, 74vw), 290px);
  }
}