/**
 * /work in the system's colours — the dark space of /pricing, violet and gold.
 *
 * Loaded last, by the gallery (index.html) only: the seven case demos keep
 * their own grounds. The hero stage paints its colours in a shader, so they
 * live in main-system-v1.js, not here — scripts/apply-system-theme.mjs makes
 * that copy and wires both into index.html. They ship together: this file
 * on the old paper canvas would put light type on a light page.
 */

:root {
  --paper: #050507;         /* the ground, same as /pricing */
  --paper-warm: #120e24;    /* the hero's floor: violet haze, not cream */
  --ink: #f4f2ee;           /* type */
  --accent: #e8c478;        /* gold: the italic in the wordmark, the road */
  --violet: #a78bfa;        /* the Websites world */
  --edge-from: #050507;     /* the page-entry fade starts from the ground */
}

/* Faint stars between the stage and the copy. */
.above::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgb(255 255 255 / 0.7), transparent 70%),
    radial-gradient(1px 1px at 33% 71%, rgb(207 196 255 / 0.6), transparent 70%),
    radial-gradient(1.5px 1.5px at 58% 14%, rgb(255 244 220 / 0.6), transparent 70%),
    radial-gradient(1px 1px at 77% 46%, rgb(255 255 255 / 0.5), transparent 70%),
    radial-gradient(1px 1px at 91% 83%, rgb(207 196 255 / 0.55), transparent 70%),
    radial-gradient(1px 1px at 47% 52%, rgb(255 255 255 / 0.35), transparent 70%);
  background-size: 360px 360px, 520px 520px, 690px 690px, 430px 430px, 610px 610px, 280px 280px;
  opacity: 0.55;
}

/* The case rows' hover plate was frosted white; here it is dark glass,
   tinted with each case's own accent. */
.case__link::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--case-accent) 22%, transparent), transparent 70%),
    rgb(14 12 24 / 0.72);
}

/* The contact block was the one dark slab on a light page. On a dark page it
   is a glass panel lit from the top right, like the portals on /pricing. */
.contact {
  background:
    radial-gradient(70rem 32rem at 88% -10%, rgb(167 139 250 / 0.18), transparent 62%),
    rgb(8 7 14 / 0.82);
  color: var(--ink);
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.contact__cta { border-color: var(--accent); color: var(--accent); }
.contact__cta:hover { background: var(--accent); color: var(--paper); }

.foot { background: #030305; }
.foot__back { color: var(--ink); }
.foot__back:hover { color: var(--accent); }

/* The reading bar is the gold road. */
.readbar { color: var(--accent); opacity: 0.8; }

/* Arriving from the Websites world (?from=system, set in index.html): the
   page-entry fade starts from the planet's colour instead of the ground, and
   takes a moment longer — the far end of the dive on /pricing. */
html[data-from='system'] {
  --edge-from: radial-gradient(120vmax 120vmax at 50% 50%, #ece6ff 0%, var(--violet) 24%, #2a1f5c 56%, #050507 82%);
}
html[data-from='system'] body::before { animation-duration: 1.1s; }