/*
 * 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);
}

/* ── Layout — let ASW handle 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-0);
  color: var(--garden-text-dim);
  text-decoration: none;
  border: 1px solid oklch(30% 0.04 270);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-2);
}
[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);
}