/* bill — the flyposted bill.
   Structure lives in tokens.css; this file is colour, type and shape.

   The look: a sheet pasted on a wall. Cheap coloured stock, two inks, and
   a heavy impression. Where the two inks cross they overprint to a third,
   which is where the green comes from — it is a consequence of the
   material, not a colour anyone chose, and it is why this sits next to
   carlosframework.com's teal as a relative rather than a copy.

   Drenched, not accented: the stock IS the surface on the bill itself.
   The stance pages drop to bone, because acid yellow is a shout and the
   three responses are the part you actually read.

   No radius anywhere. A printed sheet has corners. Depth is ink and
   perforation, never elevation — the one shadow in the system belongs to
   a tab lifting off the wall, which is a thing paper does.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── The stock ──────────────────────────────────────────────────────
     Yellow is the bill. Bone is the reading surface. Both are paper, so
     both are warm; neither is white, because white is a screen colour and
     this is a printed thing. */
  --bill-stock: #f0e34a;
  --bill-bone: #f7f4e6;
  --bill-ink: #17140f;
  --bill-blue: #1b2a8f;
  --bill-cyan: #14a0c8; /* the second ink */

  /* The sharpie. A third pen rather than a third press ink: a marker drawn
     ON the stock does not overprint with what was printed under it, so the
     pills render solid while everything else multiplies. */
  --pill-blue: #1f3fd0;
  --pill-blue-line: #12246f;
  --pill-red: #cf2233;
  --pill-red-line: #7d1119;
  --bill-over: #2f6b46; /* what cyan makes of the yellow stock */
  --bill-dim: #6b5f14;  /* the ink thinned, for secondary text ON yellow */
  --bill-dim-bone: #6a6455;

  /* ── rastrillo's contract ───────────────────────────────────────────
     tokens.css reads these. Defaults here are the bone reading surface;
     the bill itself overrides them on its own page. */
  --rst-bg: var(--bill-bone);
  --rst-surface: var(--bill-bone);
  --rst-surface-2: #efeada;
  --rst-overlay: rgba(23, 20, 15, 0.55);

  --rst-text: var(--bill-ink);
  --rst-text-muted: var(--bill-dim-bone);
  --rst-text-faint: #8b8574;

  --rst-accent: var(--bill-blue);
  --rst-accent-strong: #121d68;
  --rst-accent-soft: rgba(27, 42, 143, 0.1);
  --rst-on-accent: var(--bill-stock);

  --rst-line: rgba(23, 20, 15, 0.22);
  --rst-line-strong: rgba(23, 20, 15, 0.55);
  --rst-header-rule: var(--bill-ink);

  /* A printed sheet has corners. */
  --rst-radius: 0;
  --rst-radius-sm: 0;
  --rst-radius-pill: 0;

  /* The only depth in the system: paper lifting off a wall. Offset and
     blur, because that is what a real shadow has. */
  --rst-shadow-lift: 0 6px 18px rgba(23, 20, 15, 0.28);
  --rst-shadow-pop: 0 10px 30px rgba(23, 20, 15, 0.32);
  --rst-shadow-knob: 0 2px 6px rgba(23, 20, 15, 0.3);

  /* Status stays legible against paper without becoming a second accent. */
  --rst-tone-positive-bg: rgba(47, 107, 70, 0.14);
  --rst-tone-positive-fg: #1f5334;
  --rst-tone-warning-bg: rgba(160, 96, 12, 0.16);
  --rst-tone-warning-fg: #7a4708;
  --rst-tone-negative-bg: rgba(158, 42, 26, 0.14);
  --rst-tone-negative-fg: #8e2417;
  --rst-tone-neutral-bg: rgba(23, 20, 15, 0.08);
  --rst-tone-neutral-fg: #4a4437;


  /* ── The type ramp ──────────────────────────────────────────────────
     Four display steps and five text steps. Nothing sets a literal size:
     a bill has a handful of sorts in the case, not a continuum. */
  --t-shout: clamp(4rem, 16vw, 10.5rem);
  --t-display-1: clamp(2rem, 5vw, 3.25rem);
  --t-display-2: clamp(1.5rem, 3.2vw, 2.75rem);
  --t-display-3: clamp(1.35rem, 3vw, 1.9rem);

  --t-lede: clamp(1.0625rem, 1.3vw, 1.1875rem);
  --t-body: clamp(1rem, 1.15vw, 1.125rem);
  --t-base: 0.9375rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;
  --t-xxs: 0.75rem;

  --rst-font: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bill-display: "Big Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif;
  --bill-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
}

/* ── The browser's own surfaces ─────────────────────────────────────────
   Selection, caret, focus and scrollbar ship with defaults that belong to
   no design system. On a two-ink sheet they are the cheapest place to be
   consistent: selection is the inks swapped, focus is a registration mark. */
::selection {
  background: var(--bill-blue);
  color: var(--bill-stock);
}
:root {
  caret-color: var(--bill-blue);
  scrollbar-color: var(--bill-ink) transparent;
  scrollbar-width: thin;
}
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bill-blue);
  outline-offset: 2px;
  border-radius: 0;
}