Rebrand to the azure logo + warm sand/sea/sun palette

- Add the real Upbeat Bytes lockup (logo.svg) and use it in the header,
  replacing the placeholder inline mark + text wordmark.
- New square favicon: the logo's rising sun (bright gold) on azure.
- Recolor the design system around the logo's #0083ad azure: rename the
  --sage* accent vars to --accent*, with deep/soft azure tints; navy ink
  (#16263a) echoing the logo's "Bytes"; cool slate muted text; a deep gold
  for text-weight accents plus --gold-bright for decorative fills; warm
  sand paper background. No urgency colors.
- Retint the hero image overlay and the no-image card gradients to match.
- theme-color → azure.

Built clean; frontend tests/build pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/routes/+page.svelte

@@ -305,7 +305,7 @@
   .view-head .sub { margin: 8px 0 0; color: var(--muted); font-size: 1.02rem; }
   .view-head::after {
     content: ''; display: block; width: 46px; height: 3px;
-    background: var(--sage); border-radius: 2px; margin-top: 14px; opacity: 0.8;
+    background: var(--accent); border-radius: 2px; margin-top: 14px; opacity: 0.8;
   }
 
   /* Explore by topic — a quiet secondary discovery section, not a nav row. */
@@ -320,8 +320,8 @@
     border-radius: 999px; padding: 7px 15px; font-size: 0.9rem; cursor: pointer; transition: all 0.14s ease;
     text-transform: capitalize;
   }
-  .explore .chip:hover { border-color: var(--sage); color: var(--sage-deep); }
-  .explore .chip.active { background: var(--sage); border-color: var(--sage); color: #fff; }
+  .explore .chip:hover { border-color: var(--accent); color: var(--accent-deep); }
+  .explore .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
 
   /* Panels (Boundaries handled by its own component; History + You here) */
   .panel {
@@ -330,17 +330,17 @@
   }
   .phead { display: flex; align-items: baseline; justify-content: space-between; }
   .phead h2 { font-size: 1.3rem; }
-  .close { background: none; border: none; color: var(--sage-deep); font-size: 0.85rem; text-decoration: underline; }
+  .close { background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; text-decoration: underline; }
   .reassure { margin: 4px 0 14px; color: var(--muted); font-size: 0.85rem; }
   .hist { list-style: none; margin: 0; padding: 0; }
   .hist li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; gap: 12px; align-items: baseline; }
   .hist li:last-child { border-bottom: none; }
   .hist a { color: var(--ink); }
-  .hist a:hover { color: var(--sage-deep); }
+  .hist a:hover { color: var(--accent-deep); }
   .hsrc { margin-left: auto; color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
   .empty { margin: 0; color: var(--muted); font-style: italic; font-size: 0.85rem; }
   .reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 12px; }
-  .reset:hover { color: var(--sage-deep); }
+  .reset:hover { color: var(--accent-deep); }
 
   .youmenu .yourow {
     width: 100%; display: flex; align-items: center; justify-content: space-between;
@@ -348,10 +348,10 @@
     padding: 14px 2px; font-size: 1rem; color: var(--ink); cursor: pointer; text-align: left;
   }
   .youmenu .yourow:last-child { border-bottom: none; }
-  .youmenu .dot { background: var(--sage-soft); color: var(--sage-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
+  .youmenu .dot { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
 
   .notice {
-    text-align: center; color: var(--sage-deep); background: var(--sage-soft);
+    text-align: center; color: var(--accent-deep); background: var(--accent-soft);
     border-radius: 999px; padding: 8px 16px; margin: 10px auto 0; width: fit-content; font-size: 0.86rem;
   }
   .rest { margin-top: 18px; }