style(web): match the sign-in page to the reading room's Tufte theme

Author: ontehfritz

internal/adapter/inbound/web/templates/login.html

@@ -5,31 +5,40 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Sign in — demarkus Library</title>
   <style>
-    :root { color-scheme: dark; }
+    /* Match the reading room's Tufte palette (page.html): off-white/off-black
+       paper+ink, Charter serif, light-dark() adaptive — so the turnstile and the
+       library feel like one place. */
+    :root {
+      color-scheme: light dark;
+      --paper: light-dark(#fffff8, #151515);
+      --ink: light-dark(#111111, #dddddd);
+      --faint: light-dark(#11111120, #dddddd28);
+      --muted: light-dark(#11111199, #dddddd99);
+    }
     * { box-sizing: border-box; }
     html, body { height: 100%; }
     body { margin: 0; min-height: 100%;
            display: flex; align-items: center; justify-content: center;
-           background: #000; color: #f4f4f4;
-           font: 16px/1.6 system-ui, sans-serif; text-align: center; }
-    /* Faint full-page knowledge graph, sits behind the card. */
+           background: var(--paper); color: var(--ink); text-align: center;
+           font: 17px/1.55 Charter, 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif; }
+    /* Faint full-page knowledge graph, sits behind the card — ink at low opacity
+       so it reads on light and dark alike. */
     .graph { position: fixed; inset: 0; width: 100%; height: 100%;
              z-index: 0; pointer-events: none;
-             opacity: .22; color: #fff; }
+             opacity: .12; color: var(--ink); }
     .graph .edges line { stroke: currentColor; stroke-width: .7; }
     .graph .node { fill: currentColor; }
-    .graph .hub { fill: #fff; }
     .card { position: relative; z-index: 1;
             max-width: 26rem; padding: 4rem 1.25rem;
-            background: radial-gradient(60% 60% at 50% 50%, #000 55%, transparent);
+            background: radial-gradient(60% 60% at 50% 50%, var(--paper) 55%, transparent);
             border-radius: 1rem; }
-    h1 { font-size: 1.4rem; font-weight: 600; }
-    p { color: #cfcfcf; }
-    p.error { color: #ff6b5e; }
-    button { font: inherit; padding: .55rem 1.4rem; border-radius: 8px;
-             border: 1px solid #fff6; background: transparent; color: inherit;
+    h1 { font-size: 1.7rem; font-weight: 500; line-height: 1.2; }
+    p { color: var(--muted); }
+    p.error { color: light-dark(#cf222e, #f85149); }
+    button { font: inherit; padding: .5rem 1.4rem; border-radius: 6px;
+             border: 1px solid var(--muted); background: transparent; color: inherit;
              cursor: pointer; transition: background .15s; }
-    button:hover { background: #ffffff14; }
+    button:hover { background: var(--faint); }
   </style>
 </head>
 <!-- No htmx on this page: the turnstile is a plain form so signing in works