/* handoff.design — a CSS reference, so the CSS on it is part of the argument.
 *
 * The site this replaces was 140 articles about CSS containing not one line of
 * CSS. Two thousand words on flexbox alignment with no code block is not a
 * reference, it is a description of a reference, and it is why the domain ended
 * up parked. So the code sample is the primary object on every page here, the
 * way the specification table is on the product sites, and this stylesheet
 * exists mostly to make code legible at length.
 *
 * DELIBERATELY NOT A DARK TERMINAL. Developer sites default to a dark chrome
 * with syntax colours borrowed from an editor theme, which looks like the tool
 * the reader already has open and reads badly for prose. This is a light paper
 * with a dark code block: the prose is a document, the code is an inset.
 *
 * Dark mode is a real setting for this audience rather than a courtesy, so the
 * palette is defined twice and the code block is the part that changes least -
 * a reader who has learned what a comment looks like should not have to relearn
 * it at night.
 */

:root[data-site="handoff"] {
  --paper: #fdfdfc;
  --paper-alt: #f3f4f6;

  --ink: #16181d;
  --ink-soft: #40454f;
  --ink-faint: #626875;

  /* Indigo rather than the old site's flat #2B6CB0: it holds white text at
     6.4:1, and it is distinguishable from the blue of a visited link, which the
     old palette was not. */
  --accent: #3b3bd6;
  --accent-ink: #ffffff;
  --accent-soft: #ececfd;

  --line: #e2e4e9;
  --radius: 6px;

  /* The code block. One dark ground in both themes, because a code sample that
     inverts between light and dark mode is a second thing to read. */
  --code-bg: #1b1d24;
  --code-ink: #e8eaf0;
  --code-line: #2b2e38;
  --code-label: #9aa1b1;
  --code-inline-bg: #eef0f4;
  --code-inline-ink: #26303f;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="handoff"] {
    --paper: #14161a;
    --paper-alt: #1b1e24;
    --ink: #edeff4;
    --ink-soft: #c4c9d4;
    --ink-faint: #969dab;
    /* Lifted well clear of the light-mode indigo, which is unreadable on this
       ground. Inverting the background and keeping the brand colour is the
       usual way a dark mode goes wrong. */
    --accent: #9fa4ff;
    --accent-ink: #12131b;
    --accent-soft: #23253a;
    --line: #2a2e36;
    --code-bg: #0f1116;
    --code-line: #232730;
    --code-inline-bg: #23262e;
    --code-inline-ink: #d8dde7;
  }
}

/* --- code ---------------------------------------------------------------
   The reason anyone is here. Sized at 0.92em rather than shrunk to 0.8: a
   reader is expected to read the sample, not glance at it, and a declaration
   set at 12px on a phone is a sample nobody checks. */
:root[data-site="handoff"] .prose pre {
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--code-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 1.5rem 0;
  /* A long selector or a gradient value must not widen the page. This is the
     one element allowed to scroll sideways. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--mono);
  font-size: 0.92em;
  line-height: 1.6;
  tab-size: 2;
}

:root[data-site="handoff"] .prose pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* Inline code is a property name in a sentence - `gap`, `aspect-ratio`. It
   needs to be identifiable without becoming a highlight, so a tinted chip at
   the same weight as the surrounding text. */
:root[data-site="handoff"] .prose code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--code-inline-bg);
  color: var(--code-inline-ink);
  padding: 0.12em 0.34em;
  border-radius: 4px;
  overflow-wrap: break-word;
}

/* A table of property values or browser support. Tabular numerals so a column
   of versions lines up, and its own scroll container at phone width. */
:root[data-site="handoff"] .prose table {
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
}

:root[data-site="handoff"] .prose th {
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- prose --------------------------------------------------------------
   A slightly wider measure than the reading sites use: the code blocks set the
   column width in practice, and a 68ch measure leaves them cramped beside it. */
:root[data-site="handoff"] .prose { max-width: 74ch; }
:root[data-site="handoff"] .prose p { line-height: 1.72; }

/* Headings carry the property they are about, so they are set tighter and
   heavier than the default: they work as a scannable index of the page. */
:root[data-site="handoff"] .prose h2 {
  letter-spacing: -0.012em;
  margin-top: 2.4rem;
}

:root[data-site="handoff"] .prose h3 {
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}

/* --- links ----------------------------------------------------------------
   site.css colours every <a> with --accent-ink. This theme set --accent-ink to
   #ffffff, reading the name as "ink that sits ON the accent" - the colour of
   button text - which made every link on the site white on a white page. It
   was invisible in every automated check here, because nothing measured
   contrast on a rendered page, and it shipped to production on all seven
   themes at once.

   The accent itself is the right colour for a link in both modes: each theme
   chose it dark enough to hold white text, which is exactly dark enough to
   read on paper, and each theme's dark-mode block lifts it for a dark ground.
   var() resolves per element, so this one declaration follows that switch. */
:root[data-site="handoff"] {
  --accent-ink: var(--accent);
}