/* The palette and the reset, defined once and linked by every page — the two
   static pages and the creator pages rendered in app/pages.py. */
  /* A quiet greyscale set. One ink, one paper, and steps between — nothing
     competes with the transcript, which is the only thing worth looking at. */
  :root {
    --paper: #fffefc; --sunk: #f7f6f3; --raised: #fffefc;
    --ink: #37352f; --ink-soft: #787774; --ink-faint: #9b9a97;
    --rule: #eae9e5; --rule-strong: #dcdbd6;
    --hover: #f1f0ec;
    --shadow: 0 1px 2px rgba(15,15,15,.05);
    --shadow-lift: 0 4px 12px rgba(15,15,15,.08);
    /* One voice, and it is a typewriter. A transcript is a record: fixed
       columns, an even rhythm, timestamps that line up under each other —
       and the page that hands it over should sound like the same machine. */
    --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
            "Roboto Mono", "DejaVu Sans Mono", Consolas, monospace;
    /* The single colour on an otherwise grey page: a marker pen, in Instagram's
       pink, spent only where something is worth marking.
       The ink on it is near-black rather than the page's warm --ink: that only
       reaches 3.5:1 against this pink, which fails for the small text the
       marker sits behind. This is 5.5:1. */
    --marker: #ff3287;
    --marker-ink: #1a0d13;
    /* The pink drawn as a line rather than as a block. It needs 3:1 against
       the surface behind it (WCAG 1.4.11, a control's own boundary), which is
       a different job from --marker, whose job is to carry text. In light they
       happen to be the same colour; in dark they cannot be. */
    --marker-edge: #ff3287;
    /* And the same pink thinned to a halo. The box is outlined in the solid
       colour now, so a focus ring in that colour would be invisible against
       it — this sits around the outline rather than repeating it. */
    --marker-soft: rgba(255, 50, 135, .24);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* The page is the darkest surface; cards sit above it and rules are
         strong enough to be seen on a phone at low brightness. */
      --paper: #151514; --sunk: #1e1e1c; --raised: #212120;
      --ink: #edece8; --ink-soft: #a3a29e; --ink-faint: #77776f;
      --rule: #34342f; --rule-strong: #4a4a43;
      --hover: #292926;
      /* Deepened so it still reads as a block on a near-black page while
         carrying light text at 6.2:1. */
      --marker: #a31f59; --marker-ink: #ffe6f0;
      /* --marker is deepened so light text on it reaches 6.2:1, which leaves
         it at 2.2:1 as a hairline on a card — invisible where it matters. The
         edge is lifted back up to 4.0:1 and carries no text. */
      --marker-edge: #e0417f;
      --marker-soft: rgba(255, 80, 150, .30);
      --shadow: none; --shadow-lift: 0 4px 14px rgba(0,0,0,.4);
    }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink);
    font-family: var(--mono);
    font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  }
  [hidden] { display: none !important; }
  ::selection { background: var(--marker); color: var(--marker-ink); }