{% extends "base.html" %}
{% block title %}Style guide — Bento{% endblock %}
{% block content %}
<header class="page-header">
  <h1 class="page-title">Style guide</h1>
</header>

<style>
  .sg-section { margin-bottom: 40px; }
  .sg-section h2 {
    font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    font-size: 18px; font-weight: 400; margin: 0 0 12px;
  }
  .sg-section h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 16px 0 8px; font-weight: 600; }
  .sg-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .sg-swatch {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 12px;
    font-size: 12px;
  }
  .sg-swatch-chip { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; }
  .sg-swatch-meta { display: flex; flex-direction: column; min-width: 0; }
  .sg-swatch-token { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text); }
  .sg-swatch-value { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); }
  .sg-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .sg-stack { display: flex; flex-direction: column; gap: 12px; }
  .sg-sample { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
  .sg-caption { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); margin-top: 6px; }
</style>

<section class="sg-section">
  <h2>Colors</h2>

  <h3>Surfaces</h3>
  <div class="sg-grid">
    {% set surfaces = [
      ('--bg', '#FDF9FA', 'workspace background'),
      ('--bg-sidebar', '#FEF5F6', 'sidebar background'),
      ('--bg-card', '#FFFFFF', 'cards / lists'),
      ('--bg-card-hover', '#FBF5F6', 'hover state'),
      ('--bg-subtle', '#FAF2F3', 'pill backgrounds / code blocks'),
      ('--border', '#F1E4E6', 'soft dividers'),
      ('--border-strong', '#E8D4D7', 'separators on emphasis'),
    ] %}
    {% for token, value, note in surfaces %}
    <div class="sg-swatch">
      <span class="sg-swatch-chip" style="background: {{ value }}"></span>
      <span class="sg-swatch-meta">
        <span class="sg-swatch-token">{{ token }}</span>
        <span class="sg-swatch-value">{{ value }} — {{ note }}</span>
      </span>
    </div>
    {% endfor %}
  </div>

  <h3>Text</h3>
  <div class="sg-grid">
    {% set texts = [
      ('--text', '#1F1614', 'primary text'),
      ('--muted', '#8E7A72', 'secondary text'),
    ] %}
    {% for token, value, note in texts %}
    <div class="sg-swatch">
      <span class="sg-swatch-chip" style="background: {{ value }}"></span>
      <span class="sg-swatch-meta">
        <span class="sg-swatch-token">{{ token }}</span>
        <span class="sg-swatch-value">{{ value }} — {{ note }}</span>
      </span>
    </div>
    {% endfor %}
  </div>

  <h3>Brand & status</h3>
  <div class="sg-grid">
    {% set status = [
      ('--accent', '#E84564', 'coral — brand'),
      ('--accent-soft', '#FCD9DD', 'soft coral fill'),
      ('--success', '#2F9B5A', 'success / done'),
      ('--success-soft', '#DCF1E2', 'success fill'),
      ('--warn', '#D17A1E', 'warning / pending'),
      ('--warn-soft', '#FBE4CC', 'warning fill'),
      ('--error', '#D43F3F', 'error / failed'),
      ('--error-soft', '#F8D7D5', 'error fill'),
      ('--purple', '#6E60C9', 'in-progress / model'),
      ('--purple-soft', '#E1DDF5', 'purple fill'),
      ('--info', '#3B8BC8', 'live work indicator'),
      ('--info-soft', '#DDECF7', 'info fill'),
    ] %}
    {% for token, value, note in status %}
    <div class="sg-swatch">
      <span class="sg-swatch-chip" style="background: {{ value }}"></span>
      <span class="sg-swatch-meta">
        <span class="sg-swatch-token">{{ token }}</span>
        <span class="sg-swatch-value">{{ value }} — {{ note }}</span>
      </span>
    </div>
    {% endfor %}
  </div>
</section>

<section class="sg-section">
  <h2>Typography</h2>
  <div class="sg-stack">
    <div class="sg-sample">
      <h1 class="page-title">Page title — Varela Round</h1>
      <div class="sg-caption">.page-title · 32px · weight 400</div>
    </div>
    <div class="sg-sample">
      <h1 class="session-title">Session title — Varela Round</h1>
      <div class="sg-caption">.session-title · 24px · weight 400</div>
    </div>
    <div class="sg-sample">
      <p>Body text — system sans (-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto). 14px / 1.5.</p>
      <p class="muted small">Muted small (.muted .small) — 12px, color: var(--muted)</p>
      <div class="sg-caption">body · 14px · weight 400</div>
    </div>
    <div class="sg-sample">
      <code>monospace — ui-monospace, "JetBrains Mono", Menlo</code>
      <div class="sg-caption">inline code · 13px</div>
    </div>
  </div>
</section>

<section class="sg-section">
  <h2>Badges &amp; status pills</h2>
  <div class="sg-sample">
    <div class="sg-row">
      <span class="badge done">done</span>
      <span class="badge working">working</span>
      <span class="badge processing">processing</span>
      <span class="badge processed">processed</span>
      <span class="badge unprocessed">unprocessed</span>
      <span class="badge failed">failed</span>
      <span class="badge error">error</span>
      <span class="badge cancelled">cancelled</span>
      <span class="badge running">running</span>
      <span class="badge model">claude-sonnet-4-6</span>
      <span class="badge claimed">claimed</span>
    </div>
    <div class="sg-caption">.badge.{done,working,processing,processed,unprocessed,failed,error,cancelled,running,model,claimed}</div>

    <h3>Working badge (animated)</h3>
    <div class="sg-row">
      <span class="badge working">working</span>
      <span class="muted small">conic-gradient pastel rainbow with lavender glow — 2.4s cycle</span>
    </div>

    <h3>Agent status pills</h3>
    <div class="sg-row">
      <span class="status-pill state-good"><span class="dot"></span> Healthy</span>
      <span class="status-pill state-online"><span class="dot"></span> Online</span>
      <span class="status-pill state-working"><span class="dot"></span> Working</span>
      <span class="status-pill state-offline"><span class="dot"></span> Offline</span>
    </div>
    <div class="sg-caption">.status-pill.state-{good,online,working,offline}</div>
  </div>
</section>

<section class="sg-section">
  <h2>Event type pills (Debug timeline)</h2>
  <div class="sg-sample">
    <div class="sg-row">
      <span class="event-pill type-session">SESSION</span>
      <span class="event-pill type-done">DONE</span>
      <span class="event-pill type-assistant">ASSISTANT</span>
      <span class="event-pill type-thinking">THINKING</span>
      <span class="event-pill type-tool">TOOL</span>
      <span class="event-pill type-result">RESULT</span>
      <span class="event-pill type-result is-error">RESULT</span>
      <span class="event-pill type-tokens">TOKENS</span>
      <span class="event-pill type-system">SYSTEM</span>
      <span class="event-pill type-custom">CUSTOM</span>
    </div>
    <div class="sg-caption">.event-pill.type-{session,done,assistant,thinking,tool,result(.is-error),tokens,system,custom}</div>
  </div>
</section>

<section class="sg-section">
  <h2>Buttons &amp; controls</h2>
  <div class="sg-sample">
    <div class="sg-row">
      <button class="btn-secondary">Secondary</button>
      <button class="btn-danger">Danger</button>
      <button class="filter-button">All events</button>
      <button class="filter-button active">2 of 9 selected</button>
    </div>
    <div class="sg-caption">.btn-secondary · .btn-danger · .filter-button(.active)</div>

    <h3>Filter pills (Inbox)</h3>
    <div class="sg-row">
      <a class="filter-tab active" href="#">All <span class="filter-count">163</span></a>
      <a class="filter-tab" href="#">Unprocessed <span class="filter-count">155</span></a>
      <a class="filter-tab" href="#">Processed <span class="filter-count">8</span></a>
      <a class="filter-tab" href="#">Failed <span class="filter-count">0</span></a>
    </div>
    <div class="sg-caption">.filter-tab(.active) · .filter-count</div>

    <h3>Toggles (filter popovers)</h3>
    <div class="sg-row" style="gap: 24px">
      <label class="toggle"><input type="checkbox" checked><span class="toggle-track"><span class="toggle-thumb"></span></span></label>
      <label class="toggle"><input type="checkbox"><span class="toggle-track"><span class="toggle-thumb"></span></span></label>
    </div>
    <div class="sg-caption">.toggle / .toggle-track / .toggle-thumb</div>
  </div>
</section>

<section class="sg-section">
  <h2>Cards &amp; surfaces</h2>
  <h3>Stat card</h3>
  <div class="sg-sample" style="padding: 0; border: none; background: transparent;">
    <div class="stat-row" style="margin: 0;">
      <div class="stat-card">
        <div class="stat-label">Agents</div>
        <div class="stat-value">3</div>
        <div class="stat-foot muted">0 online</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">Total cost</div>
        <div class="stat-value">$0.0042</div>
        <div class="stat-foot muted">all time</div>
      </div>
    </div>
  </div>

  <h3>Empty state</h3>
  <p class="empty-state">No items here yet. Run <code>bento serve agent.py</code> to start.</p>

  <h3>Mini-list row</h3>
  <ul class="mini-list">
    <li>
      <a class="mini-row" href="#">
        <div class="mini-icon kind-webhook">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.6 13.5l6.8 4M15.4 6.5l-6.8 4"/></svg>
        </div>
        <div class="mini-body">
          <div class="mini-primary">manual</div>
          <div class="mini-secondary muted small">#42 · webhook-summarizer</div>
        </div>
        <div class="mini-aside">
          <span class="badge unprocessed">Unprocessed</span>
          <span class="mini-time muted small">3m ago</span>
        </div>
      </a>
    </li>
  </ul>
  <div class="sg-caption">.mini-list / .mini-row / .mini-icon.kind-{cron,inbox,webhook} / .mini-aside</div>
</section>

<section class="sg-section">
  <h2>Avatars</h2>
  <div class="sg-sample">
    <div class="sg-row" style="gap: 20px">
      <span class="avatar" style="background: #F8B5B0">WS</span>
      <span class="avatar-mini" style="background: #D4B5E8">TP</span>
      <span class="avatar-md" style="background: #B5E0CC">CT</span>
      <span class="avatar-lg" style="background: #FFD4A8">SE</span>
      <span class="avatar-xl" style="background: #C9DCEF">QA</span>
    </div>
    <div class="sg-caption">.avatar (24) · .avatar-mini (18) · .avatar-md (32) · .avatar-lg (40) · .avatar-xl (56)</div>
    <h3>Palette</h3>
    <div class="sg-row" style="gap: 8px">
      {% for c in ['#F8B5B0','#FFD4A8','#FFC8DD','#D4B5E8','#B5E0CC','#FCE38A','#FFB6A3','#C9DCEF','#E5C9B3','#F2A6C7'] %}
        <span class="avatar-md" style="background: {{ c }}">·</span>
      {% endfor %}
    </div>
    <div class="sg-caption">md5(agent_name) % palette — 10 warm pastels</div>
  </div>
</section>

<section class="sg-section">
  <h2>JSON syntax (detail-pane)</h2>
  <div class="sg-sample" style="padding: 16px;">
    <pre class="detail-pre"><span class="json-key">"agent"</span>: <span class="json-str">"webhook-summarizer"</span>,
<span class="json-key">"input_tokens"</span>: <span class="json-num">2186</span>,
<span class="json-key">"is_error"</span>: <span class="json-bool">false</span>,
<span class="json-key">"output"</span>: <span class="json-null">null</span></pre>
    <div class="sg-caption">.detail-pre with .json-{key,str,num,bool,null}</div>
  </div>
</section>

{% endblock %}