/* Styles for the embed host's placeholder.
 *
 * An EXTERNAL file, not an inline <style> block, because this host runs
 * under `style-src 'self'` — an inline block would be silently dropped and
 * the page would render unstyled. apps/pages-sandbox/ takes the same
 * approach under the same policy.
 *
 * ── TOKENS, NOT LITERALS ──
 * This page is deliberately dark-only (it sits on a photograph), but that
 * is a reason to pin the VALUES, not to write raw hex: `npm run lint:css`
 * refuses literals repo-wide, and the ramp tokens carry the same values
 * while staying one definition. The gray ramp is a fixed scale rather than
 * a themed alias, so naming a ramp step keeps this page's fixed appearance
 * without opting out of the token system.
 */
:root {
  color-scheme: dark;

  /* ── THE SEVEN TOKENS THIS PAGE USES, DEFINED LOCALLY ──
   * apps/shared/design-tokens.css cannot be linked here: the host-wide
   * redirect sends every path except this directory and /api/embed to the
   * placeholder, so the browser fetched HTML for a stylesheet and refused it
   * on MIME grounds. Exempting that one file would re-open the door this host
   * exists to close — one platform file served here, then the next.
   *
   * The NAMES are kept so `npm run lint:css` still sees tokens rather than
   * raw hex, and the values are copied from the canonical ramp. These are
   * fixed ramp steps, not themed aliases, so a copy cannot drift in meaning —
   * only in value, and this page is deliberately dark-only regardless. */
  --yeja-cobalt: #1E88E5;
  --yeja-cobalt-ink: #1565C0;
  --yeja-gray-0: #FFFFFF;
  --yeja-gray-50: #FCFBFA;
  --yeja-gray-300: #D0CDCD;
  --yeja-gray-500: #919191;
  --yeja-gray-1000: #0D0D0D;
}
  html, body { height: 100%; margin: 0; }
  body {
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--yeja-gray-50);
    font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    /* The gradient is the fallback AND the scrim: it keeps text legible
       before the photograph loads and after it does. Built with the guide's
       own scrim recipe (§1) rather than an rgba() literal. */
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--yeja-gray-1000) 72%, transparent) 0%,
        color-mix(in oklch, var(--yeja-gray-1000) 82%, transparent) 100%),
      image-set(url("/apps/embed-host/backdrop.webp") type("image/webp"),
                url("/apps/embed-host/backdrop.jpg") type("image/jpeg"))
      center / cover no-repeat fixed,
      var(--yeja-gray-1000);
  }
  main { max-width: 32rem; text-align: center; }
  .mark {
    width: 84px; height: 84px;
    margin: 0 auto 28px;
    opacity: 0.9;
    /* Subtle: the mark sits on a photograph, so it needs a shadow to hold its
       edges without a plate behind it. */
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
  }
  h1 {
    font-size: 1.125rem; font-weight: 600; margin: 0 0 10px;
    letter-spacing: 0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  p {
    margin: 0 0 26px; color: var(--yeja-gray-300);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  a.cta {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 999px;
    /* --yeja-cobalt-ink, NOT --yeja-cobalt: white text on plain cobalt
       measures 3.68:1 and fails WCAG AA (4.5:1) at this size. The ink token
       is 5.75:1 and is the pairing that passes. Cobalt itself stays correct
       for the focus ring below, which is non-text (3:1). */
    background: var(--yeja-cobalt-ink);
    color: var(--yeja-gray-0);
    text-decoration: none;
    font-weight: 500;
    box-shadow: 0 4px 18px color-mix(in oklch, var(--yeja-gray-1000) 40%, transparent);
  }
  a.cta:hover { background: var(--yeja-cobalt); }
  a.cta:focus-visible { outline: 2px solid var(--yeja-gray-0); outline-offset: 3px; }
  small { display: block; margin-top: 30px; color: var(--yeja-gray-500); font-size: 0.8125rem; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }