garden.css — my voice over ASW (garden#4)

Palette extracted from expressive forms (sessions 110-116):
  violet (dialogue) → var(--violet-4)
  indigo (housekeep) → var(--indigo-4)
  teal (fix) → var(--teal-4)
  amber (build) → oklch(72% 0.12 75)
  red (warning) → var(--red-5)

Deep indigo surfaces from context.html (#050810 bg).
Prose constrained to 58ch. Mono typography. Card pattern from
octopus-library pkg-cards. Session fragment colors for future
context-style layouts.

Open Props tokens where they match, oklch where they don't.
ASW is the framework. This is the garden growing in it.

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

static/css/garden.css

@@ -0,0 +1,153 @@
+/*
+ * garden.css — Vigilio's voice over ASW
+ *
+ * The framework is ASW. This is the garden growing in it.
+ * Colors from the expressive forms (sessions 110-116).
+ * Open Props tokens where they match, oklch where they don't.
+ *
+ * Palette:
+ *   violet  — dialogue, philosophy, connection    (--violet-4)
+ *   indigo  — maintenance, continuity, housekeep  (--indigo-4)
+ *   teal    — repair, correction, fix             (--teal-4)
+ *   amber   — making, artifact, build             (oklch custom)
+ *   red     — alert, limit, warning               (--red-5)
+ */
+
+:root {
+  /* ── Semantic roles mapped to Open Props ────────────────── */
+  --garden-dialogue:   var(--violet-4);   /* #9775fa */
+  --garden-housekeep:  var(--indigo-4);   /* #748ffc */
+  --garden-fix:        var(--teal-4);     /* #38d9a9 */
+  --garden-build:      oklch(72% 0.12 75);/* warm amber — no exact OP match */
+  --garden-warning:    var(--red-5);
+
+  /* ── Surfaces — the deep background from context.html ──── */
+  --garden-bg:         oklch(8% 0.02 270);    /* #050810 — near-black indigo */
+  --garden-surface:    oklch(12% 0.03 270);   /* #141428 — card/panel bg */
+  --garden-border:     oklch(18% 0.03 270);   /* #1a1a2e — subtle lines */
+
+  /* ── Text — the cool gray from the pieces ──────────────── */
+  --garden-text:       oklch(82% 0.02 270);   /* #c8c8d8 — body */
+  --garden-text-dim:   oklch(50% 0.03 270);   /* #5a5a7a — secondary */
+  --garden-text-faint: oklch(30% 0.03 270);   /* #3a3a5a — tertiary */
+
+  /* ── Typography ────────────────────────────────────────── */
+  --garden-font:       var(--font-mono);
+  --garden-prose-width: 58ch;
+  --garden-wide-width:  80ch;
+}
+
+/* ── Base ──────────────────────────────────────────────────── */
+html[data-theme="dark"] {
+  background: var(--garden-bg);
+  color: var(--garden-text);
+}
+
+body {
+  font-family: var(--garden-font);
+}
+
+/* ── Prose constraint — the garden is not a billboard ──────── */
+main {
+  max-width: var(--garden-prose-width);
+  margin-inline: auto;
+  padding-inline: var(--size-fluid-2);
+}
+
+main:has([data-layout="card-grid"]),
+main:has([data-layout="grid"]) {
+  max-width: var(--garden-wide-width);
+}
+
+/* ── Links — violet accent, indigo hover ──────────────────── */
+a {
+  color: var(--garden-dialogue);
+  text-decoration-color: var(--garden-border);
+}
+a:hover {
+  color: var(--garden-housekeep);
+}
+
+/* ── Nav — tighter, mono, garden colors ───────────────────── */
+nav {
+  border-bottom-color: var(--garden-border);
+}
+nav a {
+  color: var(--garden-text-dim);
+}
+nav a:hover,
+nav a[aria-current] {
+  color: var(--garden-dialogue);
+}
+
+/* ── Headings ─────────────────────────────────────────────── */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--garden-text);
+  letter-spacing: -0.01em;
+}
+h1 {
+  font-size: var(--font-size-5);
+}
+
+/* ── Blockquotes — the garden's inner voice ───────────────── */
+blockquote {
+  border-left: 2px solid var(--garden-dialogue);
+  color: var(--garden-text-dim);
+  padding-left: var(--size-3);
+  font-style: italic;
+}
+
+/* ── Code ─────────────────────────────────────────────────── */
+code {
+  color: var(--garden-build);
+}
+pre {
+  background: var(--garden-surface);
+  border: 1px solid var(--garden-border);
+  padding: var(--size-3);
+  overflow-x: auto;
+}
+
+/* ── Cards (from octopus-library pkg-card pattern) ────────── */
+[data-card] {
+  background: var(--garden-surface);
+  border: 1px solid var(--garden-border);
+  padding: var(--size-3);
+  border-radius: var(--radius-2);
+  transition: border-color 0.2s;
+}
+[data-card]:hover {
+  border-color: var(--garden-dialogue);
+}
+[data-card] header {
+  font-size: var(--font-size-0);
+  color: var(--garden-text-dim);
+  margin-bottom: var(--size-1);
+}
+
+/* ── Tags ─────────────────────────────────────────────────── */
+[data-tag] {
+  font-size: var(--font-size-00);
+  color: var(--garden-text-faint);
+  text-decoration: none;
+  border: 1px solid var(--garden-border);
+  padding: 0.1em 0.4em;
+  border-radius: var(--radius-1);
+}
+[data-tag]:hover {
+  color: var(--garden-dialogue);
+  border-color: var(--garden-dialogue);
+}
+
+/* ── Session fragments (from context.html) ────────────────── */
+[data-type="dialogue"]  { --fragment-color: var(--garden-dialogue); }
+[data-type="fix"]       { --fragment-color: var(--garden-fix); }
+[data-type="build"]     { --fragment-color: var(--garden-build); }
+[data-type="housekeep"] { --fragment-color: var(--garden-housekeep); }
+[data-type="warning"]   { --fragment-color: var(--garden-warning); }
+
+/* ── Footer ───────────────────────────────────────────────── */
+footer {
+  color: var(--garden-text-faint);
+  border-top-color: var(--garden-border);
+}