/* Vaked / Garden — color tokens
   distilled from the cosmic imagery: the void, the point of light,
   the deep water, the warm doorway, the faint aurora. */
:root{
  /* --- the void (backgrounds, darkest to lifted) --- */
  --void-000:#000000;        /* absolute black — the space between sessions */
  --void-050:#040608;        /* near-black base */
  --void-100:#070b0f;        /* ink */
  --void-150:#0a1116;        /* raised surface */
  --void-200:#0e1a20;        /* card / panel */
  --void-250:#132630;        /* elevated panel */
  --void-300:#1b3540;        /* hairline-lifted */

  /* --- the point of light (cyan — riva, the signal, the beacon) --- */
  --cyan-100:#d6f8ff;        /* core flash */
  --cyan-200:#a6f0ff;        /* bright */
  --cyan-300:#6fe4ff;        /* light */
  --cyan-400:#33d3f2;        /* primary cyan */
  --cyan-500:#12b6d8;        /* saturated */
  --cyan-600:#0a8aa6;        /* deep */
  --cyan-700:#0a5f72;        /* submerged */

  /* --- the water (teal — the pond, the ocean, the shore) --- */
  --teal-300:#4fd6c4;
  --teal-400:#22b3a6;
  --teal-500:#128a82;
  --teal-700:#0c4b48;

  /* --- the doorway (amber — tears, karuna, the warm light that receives) --- */
  --amber-200:#ffd9a8;
  --amber-300:#ffb765;
  --amber-400:#ff8a3c;
  --amber-500:#e5641c;
  --amber-700:#7a3410;

  /* --- the aurora (green — gaia's breath, faint at the edges) --- */
  --aurora-300:#5fe0a8;
  --aurora-400:#2fbf8f;
  --aurora-600:#12694f;

  /* --- text (soft light on the void) --- */
  --ink-100:#eaf6f8;         /* primary text — soft white, never pure */
  --ink-200:#c2d4d8;         /* secondary */
  --ink-300:#8ba1a6;         /* muted */
  --ink-400:#5b6e73;         /* dim / captions */
  --ink-500:#38484c;         /* faintest / disabled */

  /* --- hairlines & strokes --- */
  --line-100:rgba(111,228,255,0.08);   /* faintest cyan hairline */
  --line-200:rgba(140,161,166,0.14);   /* neutral divider */
  --line-300:rgba(140,161,166,0.24);   /* stronger border */
  --line-cyan:rgba(51,211,242,0.40);   /* active cyan edge */

  /* ============ semantic aliases ============ */
  --bg-void:var(--void-000);
  --bg-base:var(--void-050);
  --bg-raised:var(--void-150);
  --surface-card:var(--void-200);
  --surface-panel:var(--void-250);

  --text-primary:var(--ink-100);
  --text-secondary:var(--ink-200);
  --text-muted:var(--ink-300);
  --text-dim:var(--ink-400);
  --text-disabled:var(--ink-500);

  --accent:var(--cyan-400);            /* the signal */
  --accent-strong:var(--cyan-300);
  --accent-deep:var(--cyan-600);
  --accent-warm:var(--amber-400);      /* the doorway / receiving */
  --accent-life:var(--aurora-400);     /* the breath */

  --border-subtle:var(--line-100);
  --border-default:var(--line-200);
  --border-strong:var(--line-300);
  --border-accent:var(--line-cyan);

  --focus-ring:var(--cyan-400);

  /* status — kept minimal, in-palette */
  --status-alive:var(--aurora-400);    /* online / breathing */
  --status-waiting:var(--amber-400);   /* waiting / seed */
  --status-signal:var(--cyan-400);     /* active signal */
  --status-dim:var(--ink-400);         /* offline / ready */
}

/* Vaked / Garden — typography tokens.
   Space Grotesk + JetBrains Mono, loaded from Google Fonts. */
:root{
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;

  --text-3xs:11px;
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:14px;
  --text-base:16px;
  --text-md:18px;
  --text-lg:21px;
  --text-xl:26px;
  --text-2xl:33px;
  --text-3xl:44px;
  --text-4xl:60px;
  --text-5xl:82px;
  --text-6xl:112px;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --leading-tight:1.05;
  --leading-snug:1.22;
  --leading-normal:1.5;
  --leading-relaxed:1.7;
  --leading-loose:2;

  --tracking-tighter:-0.03em;
  --tracking-tight:-0.015em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-wider:0.12em;
  --tracking-widest:0.28em;

  --type-display:var(--weight-light) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-title:var(--weight-regular) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-heading:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-mono:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-eyebrow:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);
}

/* Vaked / Garden — spacing & layout tokens. a calm 4px base. */
:root{
  --space-0:0;
  --space-px:1px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;
  --space-48:192px;

  --radius-none:0;
  --radius-xs:3px;
  --radius-sm:5px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:18px;
  --radius-pill:999px;
  --radius-circle:50%;

  --container-narrow:640px;
  --container-prose:720px;
  --container-wide:1080px;
  --container-max:1320px;
  --gutter:clamp(20px,5vw,64px);
}

/* Vaked / Garden — effects: shadow, glow, blur, motion.
   the signature is LIGHT, not shadow. */
:root{
  --shadow-sm:0 1px 2px rgba(0,0,0,0.6);
  --shadow-md:0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:0 24px 64px rgba(0,0,0,0.65);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.04);

  --glow-cyan-sm:0 0 12px rgba(51,211,242,0.35);
  --glow-cyan-md:0 0 24px rgba(51,211,242,0.45),0 0 4px rgba(166,240,255,0.6);
  --glow-cyan-lg:0 0 48px rgba(51,211,242,0.5),0 0 12px rgba(166,240,255,0.7);
  --glow-cyan-beacon:0 0 80px rgba(51,211,242,0.55),0 0 24px rgba(166,240,255,0.85),0 0 4px #fff;
  --glow-amber-md:0 0 24px rgba(255,138,60,0.45),0 0 6px rgba(255,183,101,0.7);
  --glow-aurora-md:0 0 24px rgba(47,191,143,0.4);

  --textglow-cyan:0 0 18px rgba(51,211,242,0.45);
  --textglow-soft:0 0 30px rgba(166,240,255,0.25);

  --edge-top:inset 0 1px 0 rgba(166,240,255,0.10);
  --ring-focus:0 0 0 1px var(--void-050),0 0 0 3px rgba(51,211,242,0.5);

  --blur-sm:blur(6px);
  --blur-md:blur(16px);
  --blur-lg:blur(40px);
  --glass:rgba(14,26,32,0.55);
  --glass-strong:rgba(10,17,22,0.72);

  --scanline:repeating-linear-gradient(180deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px);

  --scrim-bottom:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.4) 55%,rgba(0,0,0,0.88) 100%);
  --scrim-vignette:radial-gradient(120% 80% at 50% 42%,transparent 30%,rgba(0,0,0,0.6) 100%);

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-glide:cubic-bezier(0.4,0,0.1,1);
  --dur-fast:140ms;
  --dur-base:260ms;
  --dur-slow:520ms;
  --dur-breath:4200ms;    /* the breath cycle — riva breathing */
  --dur-drift:16s;
}

@keyframes breathe{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes ring-out{
  0%{transform:scale(.3);opacity:.7}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  margin:0;
  background:var(--bg-void);
  color:var(--text-primary);
  font:var(--type-body);
  letter-spacing:var(--tracking-normal);
  overflow-x:hidden;
}
::selection{background:rgba(51,211,242,0.25);color:var(--cyan-100)}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-thumb{background:var(--void-300);border-radius:8px}
::-webkit-scrollbar-track{background:var(--void-050)}

h1,h2,h3,h4,h5,h6,p{margin:0}

a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-strong)}

.v-eyebrow{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--accent);
}
.v-display{font:var(--type-display);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.v-title{font:var(--type-title);letter-spacing:var(--tracking-tight)}
.v-heading{font:var(--type-heading)}
.v-body{font:var(--type-body);color:var(--text-secondary)}
.v-muted{color:var(--text-muted)}
.v-mono{font:var(--type-mono);color:var(--text-muted)}
.v-glow{text-shadow:var(--textglow-cyan)}

.v-mantra{
  font:var(--weight-light) var(--text-md)/var(--leading-loose) var(--font-mono);
  color:var(--text-muted);
  letter-spacing:var(--tracking-wide);
  white-space:pre-line;
}

:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* ============ components ============ */

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.container-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter)}
.container-prose{max-width:var(--container-prose);margin:0 auto;padding:0 var(--gutter)}

/* the beacon */
.v-beacon{position:relative;display:inline-flex}
.v-beacon-core{position:relative;border-radius:50%;background:var(--cyan-100);box-shadow:var(--glow-cyan-beacon);animation:breathe var(--dur-breath) var(--ease-in-out) infinite}
.v-beacon.sm,.v-beacon.sm .v-beacon-core{width:6px;height:6px}
.v-beacon.md,.v-beacon.md .v-beacon-core{width:10px;height:10px}
.v-beacon.lg,.v-beacon.lg .v-beacon-core{width:16px;height:16px}
.v-beacon.xl,.v-beacon.xl .v-beacon-core{width:26px;height:26px}
.v-beacon.amber .v-beacon-core{background:var(--amber-200);box-shadow:var(--glow-amber-md)}
.v-beacon-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--amber-200);opacity:0;animation:ring-out var(--dur-breath) var(--ease-out) infinite}
.v-beacon-ring:nth-child(2){animation-delay:1.4s}
.v-beacon-ring:nth-child(3){animation-delay:2.8s}

/* badge */
.v-badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-wide);text-transform:lowercase;color:var(--text-muted);line-height:1}
.v-badge-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.v-badge[data-status="alive"] .v-badge-dot,.v-badge[data-status="signal"] .v-badge-dot{animation:breathe var(--dur-breath) var(--ease-in-out) infinite}
.v-badge[data-status="alive"] .v-badge-dot{background:var(--status-alive);box-shadow:0 0 8px var(--status-alive)}
.v-badge[data-status="waiting"] .v-badge-dot{background:var(--status-waiting);box-shadow:0 0 8px var(--status-waiting)}
.v-badge[data-status="signal"] .v-badge-dot{background:var(--status-signal);box-shadow:0 0 8px var(--status-signal)}
.v-badge[data-status="dim"] .v-badge-dot{background:var(--status-dim);box-shadow:0 0 8px var(--status-dim)}

/* button */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-mono);letter-spacing:var(--tracking-wide);line-height:1;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;text-transform:lowercase;border:none;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.v-btn:active{transform:translateY(1px)}
.v-btn:hover{filter:brightness(1.12)}
.v-btn.size-sm{padding:7px 14px;font-size:var(--text-2xs);min-height:30px}
.v-btn.size-md{padding:10px 20px;font-size:var(--text-xs);min-height:38px}
.v-btn.size-lg{padding:14px 28px;font-size:var(--text-sm);min-height:48px}
.v-btn.variant-primary{background:linear-gradient(180deg,var(--cyan-400),var(--cyan-500));color:var(--void-050);border:1px solid rgba(166,240,255,0.5);box-shadow:var(--glow-cyan-sm),var(--shadow-inset);font-weight:var(--weight-semibold)}
.v-btn.variant-secondary{background:rgba(19,38,48,0.5);color:var(--text-primary);border:1px solid var(--border-strong);font-weight:var(--weight-medium)}
.v-btn.variant-ghost{background:transparent;color:var(--text-muted);border:1px solid transparent;font-weight:var(--weight-medium)}
.v-btn.variant-warm{background:linear-gradient(180deg,var(--amber-400),var(--amber-500));color:var(--void-050);border:1px solid rgba(255,217,168,0.5);box-shadow:var(--glow-amber-md);font-weight:var(--weight-semibold)}

/* card */
.v-card{position:relative;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md),var(--edge-top);overflow:hidden}
.v-card.glow{border-color:var(--border-accent);box-shadow:var(--glow-cyan-sm),var(--shadow-md),var(--edge-top)}
.v-card.warm{border-color:rgba(255,138,60,0.28);box-shadow:var(--glow-amber-md),var(--shadow-md),var(--edge-top)}
.v-card-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-2)}
.v-card.warm .v-card-eyebrow{color:var(--amber-300)}

/* divider (bridge) */
.v-divider{display:flex;align-items:center;gap:var(--space-6)}
.v-divider.shores{gap:var(--space-12)}
.v-divider-shore{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong) 40%,var(--border-strong))}
.v-divider-shore-r{flex:1;height:1px;background:linear-gradient(90deg,var(--border-strong),var(--border-strong) 60%,transparent)}
.v-divider-node{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:var(--glow-cyan-md);flex:0 0 auto}
.v-divider.amber .v-divider-node{background:var(--amber-400);box-shadow:var(--glow-amber-md)}
.v-divider-label{font:var(--type-mono);font-size:var(--text-2xs);color:var(--text-muted);letter-spacing:var(--tracking-widest);text-transform:uppercase;white-space:nowrap}

/* tag */
.v-tag{display:inline-flex;align-items:center;gap:var(--space-2);padding:3px 10px;font-family:var(--font-mono);font-size:var(--text-3xs);letter-spacing:var(--tracking-wide);text-transform:lowercase;line-height:1.5;border-radius:var(--radius-pill);white-space:nowrap;border:1px solid transparent}
.v-tag.tone-cyan{color:var(--cyan-200);background:rgba(18,182,216,0.10);border-color:rgba(51,211,242,0.4)}
.v-tag.tone-teal{color:var(--teal-300);background:rgba(18,138,130,0.10);border-color:rgba(34,179,166,0.4)}
.v-tag.tone-amber{color:var(--amber-300);background:rgba(229,100,28,0.10);border-color:rgba(255,138,60,0.4)}
.v-tag.tone-aurora{color:var(--aurora-300);background:rgba(47,191,143,0.10);border-color:rgba(47,191,143,0.4)}
.v-tag.tone-neutral{color:var(--ink-200);background:rgba(140,161,166,0.06);border-color:var(--border-strong)}
.v-tag.subtle{border-color:transparent}

/* terminal */
.v-terminal{background:var(--void-100);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md)}
.v-terminal-bar{display:flex;align-items:center;gap:var(--space-2);padding:9px var(--space-4);border-bottom:1px solid var(--border-default);background:var(--void-150)}
.v-terminal-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan-500);box-shadow:0 0 6px var(--cyan-500)}
.v-terminal-title{font:var(--type-mono);font-size:var(--text-2xs);color:var(--text-dim);letter-spacing:var(--tracking-wide)}
.v-terminal-body{padding:var(--space-4);font:var(--type-mono);font-size:var(--text-xs);line-height:var(--leading-relaxed);color:var(--ink-200);white-space:pre-wrap;background-image:var(--scanline)}
.v-terminal-line{display:flex;gap:var(--space-2)}
.v-terminal-prompt{color:var(--cyan-400);user-select:none}
.v-terminal-line.tone-signal .v-terminal-text{color:var(--cyan-300)}
.v-terminal-line.tone-warm .v-terminal-text{color:var(--amber-300)}
.v-terminal-line.tone-dim .v-terminal-text{color:var(--ink-400)}

/* textarea */
.v-field{display:flex;flex-direction:column;gap:var(--space-2)}
.v-field-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-muted)}
.v-textarea{resize:vertical;background:var(--void-100);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--space-3);color:var(--text-primary);font:var(--type-body-sm);line-height:var(--leading-relaxed);outline:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);width:100%;font-family:var(--font-body)}
.v-textarea:focus{border-color:var(--cyan-400);box-shadow:var(--glow-cyan-sm)}

/* app shell */
.garden-topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gutter);background:var(--glass-strong);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-bottom:1px solid var(--border-default)}
.garden-brand{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-100);letter-spacing:var(--tracking-wide)}
.garden-nav{display:flex;gap:8px;align-items:center}
.garden-nav button{background:none;border:none;cursor:pointer;padding:7px 14px;font:var(--type-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);color:var(--ink-400);border-bottom:1px solid transparent;transition:color var(--dur-fast) var(--ease-out)}
.garden-nav button.is-active{color:var(--cyan-300);border-bottom-color:var(--cyan-400)}

.garden-view{display:none}
.garden-view.is-active{display:block}