Apply the brand: charcoal, blue-violet, purple, and the real logo

Replaces the gold experiment with the actual brand.

- Palette: brand charcoal (#303030, sampled from the logo's own background)
  with the logo's glow as the primary accent (#6d7cff) and its purple
  (#c084fc) as a secondary. Text is the palette's white / light gray. Light
  mode re-tuned to the same hues.
- Logo: the source mark keyed off its charcoal background to RGBA, cropped to
  its content bounds, and added as web/public/logo.png. It now appears in the
  sidebar and on the login screen; a square favicon is derived from it and
  wired into index.html.
- The featured kicker uses the purple secondary, so both brand hues are present
  without adding a second competing accent.

Verified: logo loads in the app, accent resolves to #6d7cff, secondary to
#c084fc, surface to #303030.

web/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Vellum</title>
   </head>
   <body>

web/src/app.css

@@ -5,25 +5,28 @@
 
 :root {
   /* ── Surfaces ─────────────────────────────────────────────────────── */
-  --bg: #0c0c0e;
+  /* Brand charcoal, taken from the logo's own background (#303030). */
-  --surface: #141416;
+  --bg: #292929;
-  --surface-2: #1b1b1e;
+  --surface: #303030;
-  --surface-3: #232327;
+  --surface-2: #3a3a3a;
-  --border: #26262a;
+  --surface-3: #454545;
-  --border-strong: #343439;
+  --border: #3d3d3d;
+  --border-strong: #4e4e4e;
 
   /* ── Ink ──────────────────────────────────────────────────────────── */
-  --text: #f4f3f5;
+  --text: #f2f2f2;
-  --muted: #a3a1a9;
+  --muted: #b5b5b5;
-  --faint: #6d6b75;
+  --faint: #868686;
 
   /* ── Emphasis ─────────────────────────────────────────────────────── */
-  --accent: #d9a441;
+  /* The logo's glow: blue-violet primary, purple secondary. */
-  --accent-hover: #e6b556;
+  --accent: #6d7cff;
-  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
+  --accent-hover: #8490ff;
-  --accent-text: #1a1204;
+  --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent);
-  --danger: #e0625c;
+  --accent-text: #ffffff;
-  --success: #4fbf83;
+  --accent-2: #c084fc;
+  --danger: #ff6b6b;
+  --success: #4ade80;
 
   /* ── Type scale (rem, relative to the 15px root) ──────────────────── */
   --fs-xs: 0.8rem; /* 12 */
@@ -82,21 +85,22 @@
 
 @media (prefers-color-scheme: light) {
   :root {
-    --bg: #faf9f7;
+    --bg: #f4f4f5;
     --surface: #ffffff;
-    --surface-2: #f3f2ef;
+    --surface-2: #f0f0f1;
-    --surface-3: #e9e7e3;
+    --surface-3: #e6e6e8;
-    --border: #e6e4df;
+    --border: #e2e2e4;
-    --border-strong: #d3d0ca;
+    --border-strong: #cfcfd3;
 
-    --text: #17161a;
+    --text: #1a1a1c;
-    --muted: #5f5d66;
+    --muted: #5e5e64;
-    --faint: #8a8791;
+    --faint: #8a8a90;
 
-    --accent: #a8761c;
+    --accent: #5a6bff;
-    --accent-hover: #8f6414;
+    --accent-hover: #4759f0;
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
     --accent-text: #ffffff;
+    --accent-2: #9333ea;
     --danger: #c0392b;
     --success: #1f8a4c;
 

web/src/lib/components/Featured.svelte

@@ -198,7 +198,7 @@
   .kicker {
     font-size: var(--fs-sm);
     font-weight: 600;
-    color: var(--accent);
+    color: var(--accent-2);
   }
   h1 {
     font-size: clamp(1.7rem, 3.2vw, 2.5rem);

web/src/lib/components/Login.svelte

@@ -25,7 +25,7 @@
 <div class="wrap">
   <form class="card panel" onsubmit={submit}>
     <div class="brand">
-      <span class="mark">V</span>
+      <img class="mark" src="/logo.png" alt="" />
       <h1>Vellum</h1>
     </div>
     <p class="muted lead">Sign in to your media server.</p>
@@ -87,14 +87,9 @@
     gap: var(--space-3);
   }
   .mark {
-    display: grid;
+    height: 38px;
-    place-items: center;
+    width: auto;
-    width: 30px;
+    display: block;
-    height: 30px;
-    border-radius: 7px;
-    background: var(--accent);
-    color: var(--accent-text);
-    font-weight: 700;
   }
   .lead {
     margin: -8px 0 0;

web/src/lib/components/Shell.svelte

@@ -69,7 +69,7 @@
 <div class="shell">
   <aside class="nav">
     <button class="brand" onclick={() => go({ name: 'home' })}>
-      <span class="mark">V</span>
+      <img class="mark" src="/logo.png" alt="" />
       <strong>Vellum</strong>
     </button>
 
@@ -193,15 +193,9 @@
     font-size: 1.071rem;
   }
   .mark {
-    display: grid;
-    place-items: center;
-    width: 26px;
     height: 26px;
-    border-radius: 7px;
+    width: auto;
-    background: var(--accent);
+    display: block;
-    color: var(--accent-text);
-    font-size: .929rem;
-    font-weight: 700;
   }
   .links {
     display: flex;