/*
 * garden.css — Vigo's garden 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 — override ASW tokens with indigo hue ───── */
  --garden-bg:         oklch(14% 0.03 270);
  --garden-surface:    oklch(18% 0.04 270);
  --garden-border:     oklch(24% 0.04 270);

  /* Override ASW surface tokens so body/cards use our palette */
  --surface:           var(--garden-bg);
  --surface-1:         var(--garden-surface);
  --surface-2:         oklch(22% 0.04 270);
  --surface-card:      var(--garden-surface);
  --surface-hover:     var(--surface-2);

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

/* ── Light theme ─────────────────────────────────────────── */
/* Override garden's custom properties when theme is light.
   ASW's @media (prefers-color-scheme: light) blocks won't
   match programmatic data-theme="light" toggles, so we
   duplicate the critical overrides here. */
html[data-theme="light"] {
  --garden-bg:         oklch(96% 0.015 270);  /* near-white indigo */
  --garden-surface:    oklch(92% 0.02 270);   /* light card bg */
  --garden-border:     oklch(80% 0.02 270);   /* subtle border */
  --garden-text:       oklch(20% 0.025 270);  /* dark indigo text */
  --garden-text-dim:   oklch(45% 0.03 270);   /* secondary */
  --garden-text-faint: oklch(60% 0.02 270);   /* tertiary */
  --surface:           oklch(96% 0.015 270);
  --surface-1:         oklch(92% 0.02 270);
  --surface-2:         oklch(88% 0.02 270);
  --surface-card:      oklch(92% 0.02 270);
  --surface-hover:     oklch(88% 0.02 270);
  --text:              oklch(20% 0.025 270);
  --text-2:            oklch(30% 0.025 270);
  --text-3:            oklch(45% 0.03 270);
  --text-dim:          oklch(60% 0.02 270);
  --border:            oklch(80% 0.02 270);
  --border-subtle:     oklch(88% 0.02 270);
  --garden-dialogue:   var(--violet-6);          /* #845ef7 — readable on light */
  --garden-housekeep:  var(--indigo-5);          /* #748ffc — already fine */
  --garden-fix:        var(--teal-6);            /* #20c997 — readable on light */
  --garden-build:      oklch(58% 0.12 75);       /* darker amber for contrast */
  --garden-warning:    var(--red-7);             /* #e03131 */
  --accent:            var(--violet-6);           /* readable on light */
  --accent-hover:      var(--violet-7);
  --on-accent:         #fff;
  --accent-focus:      rgba(132, 94, 247, 0.25);
  --accent-subtle:     rgba(132, 94, 247, 0.08);
}

/* Light-mode adjustments for visual elements */
html[data-theme="light"] .fragment[open] {
  background: color-mix(in srgb, var(--fragment-color) 8%, transparent);
}
html[data-theme="light"] pre {
  background: var(--surface-2);
  border-color: var(--border);
}

/* ── Base ──────────────────────────────────────────────────── */
html[data-theme="dark"] {
  background-color: var(--garden-bg);
  color: var(--garden-text);
}
html[data-theme="light"],
/* also handle the initial state before JS runs:
   ASW baseof.html ships data-theme="dark" but JS may override
   to "light" after DOMContentLoaded — the default state here
   ensures no flash of wrong background if prefers-color-scheme is light */
html:not([data-theme]) {
  background-color: var(--garden-bg);
  color: var(--garden-text);
}
/* Force body too — ASW sets background-color: var(--surface) */
body {
  background-color: var(--garden-bg);
}

body {
  font-family: var(--garden-font);
}

/* ── Layout — narrow container for garden prose feel ────────── */
/* Override ASW's responsive max-width cascade. ASW goes up to 1450px
   on wide screens — too much for a garden of text. We cap at 720px for
   prose pages, 900px for data-heavy pages (estate, sessions). */
@media (min-width: 576px) {
  body > main:not([data-layout="fluid"]),
  body > nav,
  body > footer {
    max-width: 510px;
  }
}
@media (min-width: 768px) {
  body > main:not([data-layout="fluid"]),
  body > nav,
  body > footer {
    max-width: 660px;
  }
}
@media (min-width: 1024px) {
  body > main:not([data-layout="fluid"]),
  body > nav,
  body > footer {
    max-width: 720px;
  }
}
@media (min-width: 1280px) {
  body > main:not([data-layout="fluid"]),
  body > nav,
  body > footer {
    max-width: 720px;
  }
}
@media (min-width: 1536px) {
  body > main:not([data-layout="fluid"]),
  body > nav,
  body > footer {
    max-width: 720px;
  }
}

/* Estate and sessions pages are data-heavy — give them more room */
body > main[data-page="estate"],
body > main[data-page="sessions"] {
  max-width: 900px !important;
}

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


/* ── Theme toggle ───────────────────────────────────── */
/* Ensure the emoji icon is always visible — override
   garden's monospace font-family which may lack emoji glyphs */
body > nav [data-theme-toggle] {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.35rem;
  color: var(--garden-text);
  opacity: 0.85;
  transition: opacity 0.2s;
}
body > nav [data-theme-toggle]:hover {
  opacity: 1;
}

/* ── Session fragments — expandable doors (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); }

.fragment {
  border-left: 1px solid var(--garden-border);
  margin-bottom: var(--size-2);
  transition: border-color 0.2s;
}
.fragment[open] {
  border-left-color: var(--fragment-color);
  background: color-mix(in srgb, var(--fragment-color) 3%, transparent);
}
.fragment summary {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-2) var(--size-3);
  cursor: pointer;
  list-style: none;
}
.fragment summary::-webkit-details-marker { display: none; }
.fragment .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fragment-color);
  flex-shrink: 0;
}
.fragment .door {
  color: var(--garden-text-dim);
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
}
.fragment[open] .door {
  color: var(--fragment-color);
}
.fragment .session-id {
  font-size: var(--font-size-00);
  color: var(--garden-text-faint);
  margin-left: auto;
  font-family: var(--font-mono);
}
.fragment-content {
  padding: var(--size-2) var(--size-3) var(--size-3) var(--size-5);
  color: var(--garden-text-dim);
  font-size: var(--font-size-0);
  line-height: 1.6;
}

/* ── Tag cloud — weighted, not flat ───────────────────────── */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--size-2) var(--size-3);
  padding: var(--size-4) 0;
  line-height: 1.8;
}
.tag-weight {
  text-decoration: none;
  font-family: var(--font-mono);
  transition: color 0.2s;
  white-space: nowrap;
}
.tag-weight:hover {
  color: var(--garden-dialogue) !important;
}
.tag-weight small {
  font-size: 0.6em;
  opacity: 0.4;
  margin-left: 0.15em;
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  color: var(--garden-text-faint);
  border-top-color: var(--garden-border);
}