# Fermenty — Mentor presence: message system (dev handoff)

The mentor is **not a mascot**. Its presence is built from three things: a consistent second-person **voice**, the **emblem** (the fermentation-jar mark) used as a quiet watermark/seal, and a two-volume **message register**. Build the message register below; it's the concrete deliverable.

All values reference existing design-system tokens (`tokens/colors.css`, `typography.css`, `spacing.css`). Do **not** hardcode hex — use the `var(--*)` names given. Composed with the DS `StatusPill` and `Button` components; everything else is plain markup + tokens.

---

## The core idea: one voice, two volumes

| Register | When | Ground | Accent | Message type |
|---|---|---|---|---|
| **Silent note** (default) | Everyday guidance — the daily nudge | `--green-050` on `--green-100` border | green seal `--green-700` | calm, informational |
| **Loud card** (rare) | Something good OR something urgent | `--green-900` (deep green) | **gold** = celebration · **amber** = urgent | reward / act-now |

Rule of thumb: **the silent note is the standard.** The loud dark card appears rarely, and its *accent color* tells you which job it's doing — gold `--gold-500` for a win, amber `--amber-500` for urgency. Ground stays the same deep green in both loud cases so the "this matters" signal is consistent.

Both registers carry the **emblem** (jar icon) and set the advice text in the **display font** (`--font-display`, Comfortaa) in a **color distinct from the app's neutral ink** — this is what makes the advice read as an external message from the guide rather than system chrome.

---

## Shared foundations

- **Radius:** cards `--radius-lg` (22px).
- **Advice text:** `font-family: var(--font-display)`; `font-weight: 700`; `line-height: ~1.34`; `text-wrap: pretty`. Never neutral ink — always the register's voice color (see below).
- **Eyebrow / kicker:** `font-family: var(--font-data)` (JetBrains Mono); `font-size: 11px`; `letter-spacing: 0.14–0.16em`; `text-transform: uppercase`. Sentence-case the *words* ("Listo para catar"), uppercased only typographically.
- **Emblem SVG** (jar mark, 2px→thin stroke, `fill:none`, rounded caps/joins):
  ```
  <path d="M6 8h12M7 8V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3M6 8v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8"/>
  ```
- **Copy voice:** Spanish-first, sentence case, one sentence, sensory-then-number. Gentle imperatives for CTAs (*Ver el lote, Pasar al frío*).
- **Motion:** calm, nothing bounces. Respect `prefers-reduced-motion` (disable the pulses). Accent dot pulse uses opacity fade (see keyframes).

### Keyframes (global)
```css
@keyframes fmty-glow { 0%,100% { opacity: .35 } 50% { opacity: .85 } }
```
> Implementation note: when an element also needs a live `animation-play-state`, write animation as **longhands** (`animation-name`, `animation-duration`, `animation-timing-function`, `animation-iteration-count`), NOT the `animation:` shorthand — the shorthand gets dropped when mixed with longhands.

---

## 1. Silent note (default) — `MentorNote`

Anatomy (top → bottom):
- Container: `background: var(--green-050)`; `border: 1px solid var(--green-100)`; `border-radius: var(--radius-lg)`; `padding: 20px 22px`; `position: relative; overflow: hidden`.
- **Watermark emblem:** the jar SVG, `stroke: var(--green-200)`, `stroke-width: 1.1`, absolutely positioned `right:-18px; top:-22px`, `width/height: ~92px`, `opacity: .55`. Purely decorative (`aria-hidden`).
- **Header row** (`display:flex; align-items:center; gap:9px; margin-bottom:12px`):
  - Seal: 26px circle, `background: var(--green-700)`, centered jar icon in `stroke: var(--gold-300)`.
  - Kicker: "Fermenty · apunte", `color: var(--green-700)`, data font.
- **Advice:** display font, `font-size: ~19px`, `color: var(--green-800)`.

No CTA by default. This is the every-day card.

---

## 2. Loud card — `MentorAlert` (variant: `celebrate` | `urgent`)

Shared shell:
- Container: `background: var(--green-900)`; `border-radius: var(--radius-lg)`; `padding: 22px 22px 20px`; `position: relative; overflow: hidden`.
- **Ghost emblem:** jar SVG, `stroke: var(--green-700)`, `stroke-width: 0.9`, absolute `right:-22px; bottom:-30px`, `~150px`, `opacity: .5`, `aria-hidden`.
- **Header row:** a pulsing **dot** (8px circle) + uppercase kicker, gap 9px, margin-bottom 12px.
- **Advice:** display font, `font-size: ~20px`, `color: var(--text-on-dark)`.
- **CTA:** DS `Button` `variant="gold" size="sm"` on a 16px top margin.

Variant differences (accent only):

**`celebrate`**
- Dot: `background: var(--gold-500)`; halo `box-shadow: 0 0 0 4px rgba(245,195,86,.2)`; `fmty-glow` at **3.4s** (slow, warm).
- Kicker color: `var(--gold-400)` — e.g. "Listo para catar".
- CTA label: "Ver el lote".

**`urgent`**
- Dot: `background: var(--amber-500)`; halo `rgba(216,148,59,.22)`; `fmty-glow` at **1.8s** (faster = attention).
- Kicker color: `var(--amber-500)` — e.g. "Atención hoy".
- CTA label: an imperative — "Pasar al frío".

> Note: rust (`--rust-500`) is reserved for *spoiled/danger* status — do not use it for urgent advice; urgent uses amber (`watch`).

---

## Where they appear (Inicio / home feed)

Order in the home column: greeting → any loud card(s) → silent note → batch list. Only ever **one** loud card at a time; if a celebration and an urgency both apply, urgency wins the slot. Silent note is persistent. Batch rows use DS `StatusPill` (`active`=Activo gold pulse, `ready`=Listo green).

---

## Props summary (suggested)

```ts
MentorNote  { kicker: string; body: string }
MentorAlert { variant: 'celebrate' | 'urgent'; kicker: string; body: string;
              cta?: { label: string; onPress: () => void } }
```

Reduced-motion: gate every pulse on `@media (prefers-reduced-motion: reduce)` → `animation: none`.

---

*Reference prototype:* `Mentor Presence.dc.html` — turn 4 (4a/4b/4c) is the message system above; turn 3 (3a) shows both registers in a home-feed context.