style

AGENTS.md

@@ -6,7 +6,9 @@ Read this file fully before taking any action.
 
 ## Project Context
 
-Single-page user portal for **agent-loft.com** — lets customers sign up, log in, and manage their AI agents. No framework, no build step, no external dependencies.
+Single-page user portal for **derez.ai** — lets customers sign up, log in, and manage their AI agents. No framework, no build step, no external dependencies.
+
+**Active visual theme:** Digital Grid — deep navy/black with electric-cyan `#00f5ff` accent, monospace `Courier New` font, 3-D perspective grid floor, star-field sky. Full design spec in `style_guide.md`.
 
 | Item | Detail |
 |---|---|
@@ -25,6 +27,7 @@ styles.css              ← all styles — design tokens, layout, components
 app.js                  ← all logic — auth, agents, keys, password, restart, backups, contract
 start                   ← dev server launcher (live-server)
 AGENTS.md               ← this file
+style_guide.md          ← visual design spec (tokens, typography, components)
 
 skills/
   index.json            ← summary: [{ name, file, description }] — loaded on wizard step 1
@@ -103,27 +106,27 @@ The email is the only session token. There is no password verification on the fr
 
 ## Design Tokens
 
-All tokens are CSS custom properties declared in `:root` inside `styles.css`.
+All tokens are CSS custom properties declared in `:root` inside `styles.css`. See `style_guide.md` for full usage rules and visual examples.
 
 | Variable | Value | Usage |
 |---|---|---|
-| `--bg` | `#0f1117` | page background |
-| `--bg-card` | `#1a1d27` | app shell / auth card surface |
-| `--bg-inner` | `#141720` | inner cards, tabs bar |
-| `--bg-hover` | `#22263a` | hover states, ghost button bg |
-| `--bg-input` | `#12151f` | input / textarea background |
-| `--border` | `#2a2f45` | default borders |
-| `--border-hi` | `rgba(79,142,247,0.28)` | shell outer border glow |
-| `--accent` | `#4f8ef7` | primary brand blue |
-| `--accent-dim` | `#1a2d5e` | active tab bg, logo bg |
-| `--danger` | `#e05252` | destructive actions, errors |
-| `--danger-dim` | `#5a1f1f` | error message background |
-| `--success` | `#3fc97e` | positive indicators, active dot |
-| `--warning` | `#f0a04b` | mid-range credit bar, contract warning |
-| `--text` | `#e4e8f5` | primary text |
-| `--text-muted` | `#7a82a0` | secondary text, labels |
+| `--bg` | `#000810` | page background |
+| `--bg-card` | `#010f20` | app shell / auth card surface |
+| `--bg-inner` | `#000d1a` | inner cards, tabs bar |
+| `--bg-hover` | `#001a30` | hover states, ghost button bg |
+| `--bg-input` | `#000813` | input / textarea background |
+| `--border` | `#0a3060` | default borders |
+| `--border-hi` | `rgba(0,245,255,0.45)` | shell outer border glow |
+| `--accent` | `#00f5ff` | primary electric-cyan accent |
+| `--accent-dim` | `#002535` | active tab bg, logo bg |
+| `--danger` | `#ff3b3b` | destructive actions, errors |
+| `--danger-dim` | `#3b0000` | error message background |
+| `--success` | `#00ff88` | positive indicators, active dot |
+| `--warning` | `#ffaa00` | mid-range credit bar, contract warning |
+| `--text` | `#c8f0ff` | primary text |
+| `--text-muted` | `#2e6a80` | secondary text, labels |
 | `--radius` | `8px` | default border-radius |
-| `--shadow` | (see CSS) | shell / auth card drop shadow |
+| `--shadow` | neon glow + depth (see CSS) | shell / auth card drop shadow |
 
 **Never use raw hex values in HTML or JS** — always reference a token via `var(--token-name)` in CSS or as a string literal only when building inline styles in JS (acceptable only for dynamic status colours in `renderKeys` and `renderContract`).
 
@@ -150,15 +153,15 @@ Card backgrounds are `--bg-inner` (one level darker than the shell's `--bg-card`
 
 ### Buttons
 
-| Class | Colour | Use for |
+| Class | Appearance | Use for |
 |---|---|---|
-| `btn btn-primary btn-sm` | `--accent` blue | navigation / open actions (Open Agent) |
-| `btn btn-ghost btn-sm` | `--bg-hover` grey + border | all card-header and inline actions (Restart Agent, Buy Credits, Restore, Extend Contract, Cancel, Make Backup) |
-| `btn btn-danger` | `--danger` red | confirm dialog destructive confirm only |
-| `btn btn-block` | — modifier, full width | auth form submit buttons |
+| `btn btn-primary btn-sm` | transparent bg · white text · `--accent` border + neon glow | primary navigation actions (Open Agent, Sign In, Next →) |
+| `btn btn-ghost btn-sm` | `--bg-hover` dark bg · `--text` · `--border` | all card-header and inline actions (Restart Agent, Buy Credits, Restore, Extend Contract, Cancel, Make Backup) |
+| `btn btn-danger` | `--danger` red fill · white text | confirm dialog destructive confirm only |
+| `btn btn-block` | — width modifier, full width | auth form submit buttons |
 
 **Card-header action buttons must:**
-- Use `btn btn-ghost btn-sm` (grey) by default, or `btn btn-primary btn-sm` (blue) for a primary navigation action.
+- Use `btn btn-ghost btn-sm` (dark) by default, or `btn btn-primary btn-sm` (cyan outline) for a primary navigation action.
 - Have **no SVG icons** — text label only.
 - When two buttons appear side-by-side in a header, wrap them in `<div style="display:flex;gap:8px;">` rather than placing them as siblings.