Update kjol website with C documentation

go/cmd/kjol-web/css/app.css

@@ -77,19 +77,20 @@
 @theme {
   --radius-default: 0.375rem;
 
-  /* Sky: a cool, neutral blue. The page is mostly prose, code and tables, and the
-     accent's job is to mark the few things you can act on — a saturated indigo or a
-     primary blue competes with the content for attention instead of directing it. */
-  --color-primary: #0284c7; /* sky-600 — accent FILLS; they carry white text */
-  --color-primary-hover: #0369a1; /* sky-700 */
-  --color-primary-subtle: #f0f9ff; /* sky-50  — tinted panels, badges, callouts */
-  --color-primary-border: #bae6fd; /* sky-200 */
+  /* Navy and red — the flag, muted. kjøl is a Norwegian word and the palette says so.
+     Both are dark and low-key: the page is mostly prose, code and tables, and the brand's
+     job is to mark the few things you can act on, not to compete with them for attention.
+     (The previous sky blue did the same job, but said nothing.) */
+  --color-primary: #1e3a63; /* muted navy — FILLS; they carry white text */
+  --color-primary-hover: #16294a;
+  --color-primary-subtle: #eef2f8; /* a navy wash — tinted panels, badges, callouts */
+  --color-primary-border: #c5d1e2;
 
-  /* accent is for TEXT and icons. It is a separate token from primary because the two
-     have opposite constraints: a fill must be dark enough for white text on top of it,
-     and accent text must be readable ON the surface. One value cannot be both, and in
-     dark mode they diverge completely. */
-  --color-accent: #0369a1; /* sky-700 */
+  /* accent is for TEXT and icons, and it is the RED — which is why it is a separate token
+     from primary rather than a lighter shade of it. The two have opposite constraints: a
+     fill must be dark enough for white text on top of it, and accent text must be readable
+     ON the surface. Here they are not even the same hue: navy fills, red links. */
+  --color-accent: #9e1b32; /* dark red */
 
   /* Surfaces, lines, ink — the kit's theme contract. */
   --color-surface: #ffffff;
@@ -129,7 +130,7 @@
    as graph paper you have to read the page through.
    --------------------------------------------------------------------------- */
 :root {
-  --grid-line: rgba(15, 23, 42, 0.055);
+  --grid-line: rgba(30, 58, 99, 0.06); /* the navy, at the edge of visible */
 }
 
 /* ---------------------------------------------------------------------------
@@ -156,12 +157,21 @@
   --color-ink-muted: #9a9aa3;
   --color-ink-faint: #71717a;
 
-  /* The fill stays put — white text has to remain readable on it — but accent TEXT has
-     to climb to stay readable on a near-black surface. This is exactly why they are two
-     tokens. */
-  --color-accent: #7dd3fc; /* sky-300 */
-  --color-primary-subtle: #0b2c3f;
-  --color-primary-border: #0e4966;
+  /* Both brand tokens move in the dark, and for different reasons.
+
+     The accent has to CLIMB: a dark red on a near-black surface is unreadable, so it goes
+     up to a light rose. It is still the flag's red, just the only version of it you can
+     read here.
+
+     The fill has to climb too — which the sky blue it replaced did not. Navy is dark
+     enough that on a #101013 page a navy button loses its edges and reads as a hole in the
+     surface. So it lifts to a steel blue that still carries white text (~7:1) and still
+     looks like a button. */
+  --color-accent: #f0a3ad;
+  --color-primary: #2b4f80;
+  --color-primary-hover: #37619b;
+  --color-primary-subtle: #182234;
+  --color-primary-border: #2c3e5c;
 
   --color-text-heading: #f5f5f5;