/* Shared tokens and page furniture for index.html and privacy.html.
 *
 * Both pages carried their own hand-copied `:root` block before this file
 * existed, and they had already drifted: privacy.html was missing
 * `--success-green`. Six further rules — the reset, `body`, the footer, and
 * the decorative face — were byte-identical in both.
 *
 * This is one of the two bindings of the product's design tokens; the other is
 * `Theme` in NoSpoilersCore. Where a token exists on both sides it is named the
 * same thing on both sides. Anything with no web equivalent — SF Symbol names,
 * WidgetKit densities — lives only in Swift.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand palette ───────────────────────────────────────
   * The same hexes as BrandPalette.swift; docs/guides/brand.md is the spec.
   * Kept complete even where the web draws none of it — `--blush` and
   * `--mist-grey` have no site on either page today. A palette that is the
   * palette on one binding and a subset on the other is how the two drift.
   */
  --signal-red: #ef2b2d;
  --deep-maroon: #7a0c0f;
  --ivory: #fff7f2;
  --smoke: #1f1a1a;
  --mist-grey: #d9d2cf;
  --blush: #f6d7d4;
  --success-green: #2e9b63;

  /* ── Semantic text roles ─────────────────────────────────
   * What each colour is for, as opposed to what it is — the same three roles
   * as `Theme.Palette.textPrimary/Secondary/Tertiary`, pointing at the palette
   * above exactly as the Swift side points at `BrandPalette`.
   *
   * These were `--mid` and `--light`, which named how dark they are rather
   * than what they say, and matched nothing on the Swift side. They are now
   * the values on both sides: Swift held a lighter pair and adopted these on
   * 2026-08-18, because these clear more contrast on ivory. Same role, one
   * value — change one binding and change the other.
   */
  --text-primary: var(--smoke);
  --text-secondary: #5f5754;
  --text-tertiary: #827876;

  /* ── Foregrounds on the dark install block ───────────────
   * Four literals that used to be typed inline. They are a ramp on one dark
   * surface rather than palette entries, which is why they are named for the
   * surface they sit on. Close to `--ivory` and `--blush` but not equal to
   * them, and left at their own values rather than snapped onto the palette —
   * that would move pixels, and this pass is meant not to.
   */
  --on-dark: #fdf8f6;
  --on-dark-quiet: #f3dedd;
  --on-dark-strong: #fff;
  /* The copy button for the two seconds after it has copied. A lightened
   * `--success-green`, invented inline for that one state. */
  --success-bright: #9df3c7;

  /* ── Surfaces and structure ──────────────────────────────
   * `--card`, `--border` and `--bg` are roles the Swift side does not have
   * names for yet. The vocabulary is worth keeping: `docs/guides/brand.md` is
   * the map, and these are the roles waiting on a Swift binding rather than
   * ones deliberately left web-only.
   */
  --bg: linear-gradient(180deg, rgba(255,247,242,0.82) 0%, rgba(251,232,229,0.75) 54%, rgba(255,241,238,0.82) 100%);
  --card: rgba(255, 255, 255, 0.88);
  --border: rgba(122, 12, 15, 0.12);

  /* ── Radius ────────────────────────────────────────────────
   * Seven raw literals sat beside a single `--radius` before this. The small
   * end of the ladder is shared with `Theme.Radius` and holds the same
   * numbers, which is not a coincidence — `--radius-hairline` rounds the same
   * 3px-wide session accent bar that `Theme.Radius.hairline` rounds, and the
   * web had it at 3px against Swift's 2px purely because nobody had put the
   * two side by side.
   *
   * The top of the ladder is not shared and is not meant to be. Card radii are
   * per-surface on both bindings: the app resolves 24/18/14 per `Theme.Canvas`
   * inside `Theme.Card`, and these three are this canvas's own. See section 5
   * of docs/guides/brand.md.
   */
  --radius-hairline: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-xxl: 16px;

  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* The product's own face. Applied to the wordmark and nothing else, exactly as
   * `BrandTypeface.wordmark` is in Swift — spreading a display face into the
   * reading surfaces is a separate decision that neither side has made. */
  --wordmark: 'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Self-hosted, deliberately. Google's CDN would serve this in a quarter of the
 * bytes and would also be the only third-party request either page makes; a
 * privacy policy one click away is a poor place to start making them. The file
 * is the upstream variable TTF, so the weight range below is what drives the
 * `wght` axis — there is no separate bold to load. `Chivo-OFL.txt` sits beside
 * it because the licence travels with the font.
 *
 * A woff2 would be ~40KB against 160KB, but converting one needs tooling this
 * repo does not have and a font nobody waits for is not worth a dependency:
 * `font-display: swap` means the page never blocks on it. */
@font-face {
  font-family: 'Chivo';
  src: url('Chivo.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg), url('background.webp') center / cover no-repeat;
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 32px 24px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
  position: relative;
  z-index: 1;
}

footer a { color: var(--text-secondary); text-decoration: none; }
footer a:hover { text-decoration: underline; }

.face-deco {
  position: fixed;
  top: -20px;
  right: 0;
  width: 560px;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}