/* Keep this media rule first: theme.js updates it before the first paint. */
@media (prefers-color-scheme: dark) {
  /* Manual dark mode must never change printed copies of the agreement. */
  @media screen {
    :root {
      color-scheme: dark;
      --cream: #1b141c;
      --cream-deep: #302331;
      --paper: #271e29;
      --ink: #f4e8ef;
      --plum: #efb8dd;
      --plum-deep: #fff1f8;
      --muted: #c9b6c6;
      --wash: #332333;
      --line: rgba(239, 184, 221, .2);
    }
    body { background: radial-gradient(ellipse at 90% 0, rgba(143, 67, 113, .16), transparent 850px), linear-gradient(125deg, var(--cream), #251b25 580px, var(--cream) 1000px); }
    .wordmark-logo > g[fill="#40022e"] { fill: #fff1f8; }
    .wordmark-logo > g[fill="#a8565f"] { fill: #e6a4aa; }
    .skip { background: var(--paper); }
    .primary-link, .view-input:checked + .view-label { color: #2c1028; }
    .primary-link:hover { background: #fff1f8; }
    .view-label:hover { background: rgba(255, 241, 248, .12); }
    .card-can { --accent: #76dfba; --tint: #1e352f; }
    .card-cannot { --accent: #ff9ba6; --tint: #3d252e; }
    .card-must { --accent: #ffd087; --tint: #3a2e20; }
    .card, .foundation, .terms, .notice { box-shadow: 0 4px 20px rgba(0, 0, 0, .2); }
    .card li { border-top-color: var(--line); }
    .card h3 { text-shadow: 0 -1px 0 rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .06); }
    .card::after { background: #000; opacity: .45; }
    .medallion-highlight { stroke: #000; opacity: .6; }
    .notice { background: var(--cream); }
    .guide-preface, .explanation { background: linear-gradient(145deg, #422e42, #38273b); }
  }
}