# Agnic Logo Snippets (for agents & tools)

Use the HTML snippets in `logos.html` or `index.html` . Each snippet is fully self-contained (inline styles + markup), so you can paste it into any page without relying on host CSS.

## Available snippet types
- **Horizontal logos:** wordmark to the right of the glyph. Snippets: `ai-mini`, `hub-mini`, `pay-mini`, `id-mini`, `trust-mini`.
- **Stacked logos:** glyph above wordmark for square spaces. Snippets: `ai-stack`, `hub-stack`, `pay-stack`, `id-stack`, `trust-stack`.
- **Icon-only:** glyph only for favicons or badges. Snippets: `ai-icon` (multicolor), `ai-icon-mono` (black/white), `hub-icon`, `pay-icon`, `id-icon`, `trust-icon`.

## How to copy
In `logos.html`, click the copy icon on the desired box. The HTML (including its inline `<style>`) is copied to the clipboard. Paste the entire outer `<div data-agnic-snippet="...">...</div>` where you need it.

## Theme handling
- Each snippet uses `data-theme="light"` or `data-theme="dark"` to flip colors.
- To set manually, add `data-theme="dark"` to the outer snippet `<div>`.
- On the demo page, the theme toggle sets this attribute for all snippets.

## Fonts & assets
- Snippets import Google Fonts inline (`Spline Sans`, `Noto Sans`), so no extra setup is required.
- No external images; all shapes are pure CSS.

## Quick embed example
```html
<!-- Horizontal AgnicPay -->
<div class="agnic-snippet-block" data-agnic-snippet="pay-mini" data-theme="light">
  <style>@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@700&family=Noto+Sans:wght@600&display=swap');.agnic-snippet-block[data-agnic-snippet="pay-mini"]{display:inline-flex;align-items:center;gap:10px;font-family:'Noto Sans',sans-serif;color:#0f2042;text-decoration:none}.agnic-snippet-block[data-agnic-snippet="pay-mini"] .agnic-glyph{width:44px;height:44px;display:grid;place-items:center;transform:scale(0.8);transform-origin:center}.agnic-snippet-block[data-agnic-snippet="pay-mini"] .agnic-diamond{width:28px;height:28px;transform:rotate(45deg);border-radius:1px;background:#7ecd33;box-shadow:0 6px 18px rgba(0,0,0,0.18)}.agnic-snippet-block[data-agnic-snippet="pay-mini"] .agnic-wordmark{font-family:'Spline Sans',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-0.02em;display:inline-flex;gap:1px}.agnic-snippet-block[data-agnic-snippet="pay-mini"] .agnic-primary{color:#7ecd33}.agnic-snippet-block[data-agnic-snippet="pay-mini"] .agnic-text{color:#0f2042}.agnic-snippet-block[data-agnic-snippet="pay-mini"][data-theme="dark"]{color:#e5ecf5}.agnic-snippet-block[data-agnic-snippet="pay-mini"][data-theme="dark"] .agnic-diamond{background:#7ecd33;box-shadow:0 6px 18px rgba(0,0,0,0.35)}.agnic-snippet-block[data-agnic-snippet="pay-mini"][data-theme="dark"] .agnic-text{color:#ffffff}</style>
  <div class="agnic-glyph"><div class="agnic-diamond"></div></div>
  <div class="agnic-wordmark"><span class="agnic-text">Agnic</span><span class="agnic-primary">Pay</span></div>
</div>

```

## Tips for agents
- Prefer copying directly from `logos.html` to ensure you capture the latest inline styles.
- If you need dark mode by default, change `data-theme` to `"dark"` on the snippet.
- Snippets are stand-alone; avoid merging their CSS into a global stylesheet unless you rewrite the selectors.