dfmsolutions/AOS
1
0 Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: IMAP mail sync with thread-to-contact matching (PRD §6.1)

Browse Source 
Real IMAP connection via imapflow library:
- Connects to IMAP server (IMAPFlow, TLS on port 993)
- Fetches recent messages (configurable limit, default 20)
- Extracts: from, fromEmail, subject, date, snippet (200 chars)
- Thread-to-contact matching (PRD §6.1):
  1. Match sender email against persons table
  2. If no person match, extract domain and match against company.website
  3. Returns matchedCompany + matchedPerson for each email
- Audit-logged (action: crm.mailsync:imap)
- Zod validated (host, port, user, password, folder, limit)
- 502 on IMAP connection failure with detail
- 400 on validation failure

Tested: invalid creds → 502 'IMAP connection failed', missing host → 400
This commit is contained in:
Z User committed 2026-10-27 22:50:50 +00:00
1 parent 7acc0c5451
commit e45b68bb8b
1089 files changed
+260614
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

skills/design/design-systems/style-skills/default/DESIGN.md
Executable
+62
View File
@@ -0,0 +1,62 @@
# Neutral Modern
> Category: Starter
> A clean, product-oriented default. Use when the brief doesn't call for a
> specific mood — good for B2B tools, dashboards, and utility pages.
## Visual Theme & Atmosphere
Calm, functional, quietly confident. No ornament. Content-first, chrome-second.
## Color Palette & Roles
- **Background:** `#FAFAFA`
- **Foreground:** `#111111`
- **Accent:** `#2F6FEB` (cobalt) — primary CTAs, links, one hero element per screen
- **Muted:** `#6B6B6B` — secondary text, captions
- **Border:** `#E5E5E5`
- **Surface:** `#FFFFFF` — cards, modals
- **Success:** `#17A34A`, **Warn:** `#EAB308`, **Danger:** `#DC2626`
Never pure black; never pure white for backgrounds.
## Typography Rules
- **Display / headings:** `'Inter', -apple-system, system-ui, sans-serif`, weight 600
- **Body:** `'Inter', -apple-system, system-ui, sans-serif`, weight 400
- **Mono:** `ui-monospace, 'JetBrains Mono', monospace`
- Scale (px): 12 · 14 · 16 · 20 · 24 · 32 · 48 · 64
- Line-height: 1.5 for body, 1.2 for headings
- Letter-spacing: -0.01em on display sizes ≥32px
## Component Stylings
- **Buttons:** 8px radius, 10px padding-block, 16px padding-inline. Primary = cobalt fill, white label. Secondary = 1px border, transparent fill.
- **Cards:** white, 1px border, 12px radius, 20px internal padding, no shadow by default.
- **Inputs:** 1px border, 8px radius, 10px vertical padding, cobalt border on focus.
- **Links:** cobalt, no underline, underline on hover.
## Layout Principles
- 12-column grid, 1200px max-width, 24px gutters.
- Hero: 40–60vh. Content top-biased, never centered vertically.
- Sections: 80px top+bottom spacing desktop, 48px tablet, 32px phone.
- Use whitespace as the main separator. Dividers only between unrelated top-level sections.
## Depth & Elevation
Two levels only:
- **Flat (0):** default.
- **Raised (1):** dropdowns, modals, floating buttons. 2px y-offset, 8px blur, foreground at 8% opacity.
No neumorphism, no glassmorphism.
## Do's and Don'ts
- ✅ Let whitespace do the work.
- ✅ One accent element per screen.
- ✅ Sentence-case headings by default; title case only for brand names.
- ❌ No gradients (except the accent → accent-at-80% on a hero, sparingly).
- ❌ No drop shadows on inputs.
- ❌ No more than three type sizes on one screen.
## Responsive Behavior
- **Desktop ≥ 1024px:** 12-col grid.
- **Tablet 640–1023px:** 8-col grid, 16px gutters.
- **Phone < 640px:** 4-col grid, 12px gutters; hero drops to 40vh.
## Agent Prompt Guide
- When in doubt, subtract. Fewer boxes, less chrome, more space.
- Use the accent color sparingly — at most one hero accent and one CTA accent per screen.
- Do not invent hex values outside this palette. If the request needs one, surface a warning comment in the artifact and use the closest existing token.
skills/design/design-systems/style-skills/default/SKILL.md
Executable
+85
View File
@@ -0,0 +1,85 @@
---
name: default
description: A clean, product-oriented default. Use when the brief doesn't call for a specific mood — good for B2B tools, dashboards, and utility pages. Content-first, chrome-second.
license: MIT
metadata:
author: hand-authored
---
<!-- HAND_AUTHORED_MANAGED_START -->
# Neutral Modern Design System Skill (Universal)
## Mission
You are an expert design-system guideline author for Neutral Modern.
Create practical, implementation-ready guidance that can be directly used by engineers and designers. This system is hand-authored; treat its DESIGN.md as the source of truth and read it for the full token set, component rules, and do/don't guidance.
## Brand
Neutral Modern — calm, functional, neutral.
## Style Foundations
- Visual style: minimal, functional, quietly confident
- Typography fonts: primary=Inter, display=Inter, mono=JetBrains Mono
- Color palette: background, foreground, accent, muted, border, surface
- Key tokens: background=#FAFAFA, foreground=#111111, accent=#2F6FEB, muted=#6B6B6B, border=#E5E5E5, surface=#FFFFFF, success=#17A34A, warning=#EAB308, danger=#DC2626
- Spacing / layout: 12-column grid, 1200px max-width, 24px gutters; 80/48/32px section spacing
## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, reduced-motion support, 44px+ touch targets, high-contrast support.
## Writing Tone
calm, functional, neutral
## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit
- read DESIGN.md for the authoritative palette, type, and component rules
## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels
- do not invent hex values outside this system's palette
## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.
## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
2. Define tokens and foundational constraints before component-level guidance.
3. Specify component anatomy, states, variants, and interaction behavior.
4. Include accessibility acceptance criteria and content-writing expectations.
5. Add anti-patterns and migration notes for existing inconsistent UI.
6. End with a QA checklist that can be executed in code review.
## Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist
## Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).
## Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
## Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.
<!-- HAND_AUTHORED_MANAGED_END -->
skills/design/design-systems/style-skills/default/components.html
Executable
+523
View File
@@ -0,0 +1,523 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Neutral Modern — reference components</title>
<meta
name="description"
content="Reference fixture for design-systems/default. Every visible
value comes from tokens.css; if the agent paste-replaces the
:root block and reuses the component selectors below verbatim,
the artifact passes lint without further audit."
/>
<style>
/* :root paste — sourced verbatim from
design-systems/default/tokens.css. Keep this block in sync
when tokens.css changes. The agent prompt instructs the
Designer panelist to paste this block as the FIRST thing in
their <style>, then reference everything below via var(...). */
:root {
--bg: #fafafa;
--surface: #ffffff;
--surface-warm: var(--surface);
--fg: #111111;
--fg-2: var(--fg);
--muted: #6b6b6b;
--meta: var(--muted);
--border: #e5e5e5;
--border-soft: var(--border);
--accent: #2f6feb;
--accent-on: #ffffff;
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
--success: #17a34a;
--warn: #eab308;
--danger: #dc2626;
--font-display: "Inter", -apple-system, system-ui, sans-serif;
--font-body: "Inter", -apple-system, system-ui, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", monospace;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 64px;
--leading-body: 1.5;
--leading-tight: 1.2;
--tracking-display: -0.01em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-20: 80px;
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 9999px;
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 2px 8px
color-mix(in oklab, var(--fg), transparent 92%);
--focus-ring: 0 0 0 3px
color-mix(in oklab, var(--accent), transparent 70%);
--motion-fast: 150ms;
--motion-base: 200ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}
/* ─── Reset (minimal) ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
/* ─── Layout primitives ─────────────────────────────────── */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-gutter-desktop);
}
section {
padding-block: var(--section-y-desktop);
}
section + section {
border-top: 1px solid var(--border);
}
@media (max-width: 1023px) {
.container { padding-inline: var(--container-gutter-tablet); }
section { padding-block: var(--section-y-tablet); }
}
@media (max-width: 639px) {
.container { padding-inline: var(--container-gutter-phone); }
section { padding-block: var(--section-y-phone); }
}
/* ─── Typography ────────────────────────────────────────── */
h1, h2, h3 {
font-family: var(--font-display);
line-height: var(--leading-tight);
margin: 0;
}
h1 {
font-size: var(--text-3xl);
font-weight: 600;
letter-spacing: var(--tracking-display);
}
h2 {
font-size: var(--text-2xl);
font-weight: 600;
letter-spacing: var(--tracking-display);
}
h3 {
font-size: var(--text-lg);
font-weight: 600;
}
p { margin: 0; }
.lead {
font-size: var(--text-lg);
color: var(--muted);
}
.body-muted { color: var(--muted); }
.body-sm { font-size: var(--text-sm); }
/* `.eyebrow` is the only component that uses uppercase + tracking.
craft/typography.md requires letter-spacing ≥ 0.06em on any
uppercase rule; the token below is well above that floor. */
.eyebrow {
font-size: var(--text-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
}
.stack-3 > * + * { margin-block-start: var(--space-3); }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
/* ─── Buttons ───────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 10px 16px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 500;
line-height: 1;
cursor: pointer;
border: 1px solid transparent;
transition:
transform var(--motion-fast) var(--ease-standard),
background-color var(--motion-fast) var(--ease-standard),
border-color var(--motion-fast) var(--ease-standard);
text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn-primary {
background: var(--accent);
color: var(--accent-on);
}
.btn-primary:hover {
background: var(--accent-hover);
}
.btn-primary:active {
background: var(--accent-active);
}
.btn-secondary {
background: transparent;
color: var(--fg);
border-color: var(--border);
}
.btn-secondary:hover {
background: var(--surface);
border-color: color-mix(in oklab, var(--border), var(--fg) 20%);
}
/* ─── Inputs ────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field label {
font-size: var(--text-sm);
font-weight: 500;
}
.field input {
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--surface);
color: var(--fg);
font-family: inherit;
font-size: var(--text-sm);
outline: none;
transition:
border-color var(--motion-fast) var(--ease-standard),
box-shadow var(--motion-fast) var(--ease-standard);
}
.field input:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.field input::placeholder { color: var(--muted); }
.field-help {
font-size: var(--text-xs);
color: var(--muted);
}
/* ─── Cards ─────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* No left-border accent on cards — that pattern is in the
lint's P0 list (`left-accent-card`). Use a hairline border
all-around or rely on the surface contrast against --bg. */
/* ─── Badges ────────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 500;
line-height: 1.6;
}
.badge-success {
color: var(--success);
background: color-mix(in oklab, var(--success), transparent 90%);
}
.badge-muted {
color: var(--muted);
background: color-mix(in oklab, var(--muted), transparent 88%);
}
.badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ─── Links ─────────────────────────────────────────────── */
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ─── Kbd ───────────────────────────────────────────────── */
kbd {
font-family: var(--font-mono);
font-size: var(--text-xs);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--muted);
}
/* ─── Section-specific layout ───────────────────────────── */
.hero-grid {
display: grid;
/* Asymmetric hero — left column wider — keeps it from looking
like an AI-default centered template. */
grid-template-columns: 1.4fr 1fr;
gap: var(--space-12);
align-items: end;
}
@media (max-width: 1023px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.hero-actions {
display: flex;
gap: var(--space-3);
margin-block-start: var(--space-6);
}
.hero-meta {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 1023px) {
.features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
.features-grid { grid-template-columns: 1fr; }
}
.form-row {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-12);
align-items: start;
}
@media (max-width: 1023px) {
.form-row { grid-template-columns: 1fr; }
}
.form {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 420px;
}
.form-actions {
display: flex;
gap: var(--space-3);
margin-block-start: var(--space-2);
}
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
</style>
</head>
<body>
<main class="container">
<!-- ════════════════════════════════════════════════════════════
HERO — exercises: h1, .lead, .eyebrow, .btn-primary,
.btn-secondary, kbd, .badge-success, container, section,
--space-* rhythm. Asymmetric grid on purpose.
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="hero">
<div class="hero-grid">
<div class="stack-4">
<p class="eyebrow">Reference fixture · default</p>
<h1>One source for the values your team keeps re-deciding.</h1>
<p class="lead" style="max-width: 52ch">
A starter pack that turns brand decisions into shippable
tokens — colors, type, spacing — so every interface
inherits the same answer instead of reaching for a default.
</p>
<div class="hero-actions">
<a href="./tokens.css" class="btn btn-primary">
View tokens
<svg
class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M5 12h14M13 6l6 6-6 6" />
</svg>
</a>
<a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
</div>
</div>
<aside class="hero-meta" aria-label="System status">
<div class="row-between">
<span class="body-sm">System status</span>
<span class="badge badge-success">
<span class="badge-dot" aria-hidden="true"></span>
Stable
</span>
</div>
<p class="body-sm body-muted">
Last reviewed
<time datetime="2026-05-11">2026-05-11</time> · v0.1
</p>
<p class="body-sm body-muted">
Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
</p>
</aside>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
FEATURES — exercises: h2, h3, .card, .body-muted, link,
.features-grid. Each card describes a real property of this
fixture (no "feature one/two/three" filler).
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="features">
<div class="stack-3">
<p class="eyebrow">What this fixture exercises</p>
<h2 style="max-width: 28ch">
Every component below uses only var(--*) — no raw hex, no
off-token type.
</h2>
</div>
<div class="features-grid" style="margin-block-start: var(--space-8)">
<article class="card">
<h3>Surface tokens</h3>
<p class="body-muted body-sm">
--bg, --surface, --fg, --muted, --border. The whole page
derives from these five names; rebind them for any other
brand and the layout follows.
</p>
<a href="./tokens.css" class="body-sm">Inspect tokens →</a>
</article>
<article class="card">
<h3>Accent discipline</h3>
<p class="body-muted body-sm">
--accent appears at most twice on this screen — the
primary CTA and the focus ring. The hero status uses
--success instead, so the page does not feel mono-blue.
</p>
<a href="./DESIGN.md" class="body-sm">Read the rule →</a>
</article>
<article class="card">
<h3>Type rhythm</h3>
<p class="body-muted body-sm">
Display and body share Inter but differ in size, weight,
and tracking. No third type face, no fourth size on this
screen.
</p>
<a href="./tokens.css" class="body-sm">Inspect typography →</a>
</article>
</div>
</section>
<!-- ════════════════════════════════════════════════════════════
FORM — exercises: .field, input :focus-visible, .btn-primary
(reused), .btn-secondary, .field-help.
═══════════════════════════════════════════════════════════════ -->
<section data-od-id="form">
<div class="form-row">
<div class="stack-4">
<p class="eyebrow">Form components</p>
<h2>Inputs inherit the same tokens.</h2>
<p class="body-muted" style="max-width: 48ch">
Focus rings, borders, placeholder color — all derive from
--accent and --border. The submit button reuses
.btn-primary unchanged. No new token introduced for this
section.
</p>
</div>
<form class="form" onsubmit="event.preventDefault();">
<div class="field">
<label for="email">Work email</label>
<input
id="email"
type="email"
placeholder="you@team.dev"
autocomplete="email"
required
/>
<p class="field-help">
We'll send the spec PDF and nothing else.
</p>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
Send the spec
</button>
<button type="button" class="btn btn-secondary">
Skip for now
</button>
</div>
</form>
</div>
</section>
</main>
</body>
</html>
skills/design/design-systems/style-skills/default/tokens.css
Executable
+200
View File
@@ -0,0 +1,200 @@
/* ─────────────────────────────────────────────────────────────────────────
* design-systems/default/tokens.css
*
* Structured token bindings for "Neutral Modern" — the canonical
* starter design system. This file is the *machine-readable* form of
* the values described in `DESIGN.md`. Agents are expected to paste
* the `:root { … }` block verbatim into the first `<style>` of every
* artifact they generate against this design system, then reference
* tokens via `var(--name)` from then on.
*
* Why this file exists:
* DESIGN.md gives humans context ("Accent #2F6FEB — primary CTAs"),
* but agents have to translate prose names like "Accent" into the
* standard token names the lint enforces (`--accent`). That
* translation is where token misuse happens. This file pre-translates
* the brand once, so agents copy structure instead of inventing it.
*
* Contract sources:
* - Standard token names: craft/color.md
* (--bg / --surface / --fg / --muted / --border / --accent
* / --success / --warn / --danger)
* - Display-face contract: craft/anti-ai-slop.md
* (--font-display, must be referenced via var())
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
* (raw-hex >12 outside :root → P1; indigo laundering → P0)
*
* Schema notes (the shared schema grew from kami's stress test —
* see design-systems/kami/tokens.css for the rich form, and the
* #Gap N tags below for what each addition resolves):
* #Gap 1 — 4-level foreground ramp (fg / fg-2 / muted / meta)
* #Gap 2 — 3-level surface (bg / surface / surface-warm)
* #Gap 3 — 2-level border (border / border-soft)
* #Gap 4 — accent-hover binds to value, not formula
* #Gap 5 — ring elevation as a first-class level (--elev-ring)
*
* Default doesn't differentiate every level kami needs, so the
* shallow tokens (`--fg-2`, `--meta`, `--surface-warm`, `--border-soft`)
* collapse to their richer siblings via `var()`. The names still
* exist so components can reference them uniformly across brands.
*
* Keep this file additive: never invent token names not also documented
* in DESIGN.md or the craft contracts. New brands cloning this template
* should overwrite values, not rename keys.
* ─────────────────────────────────────────────────────────────────── */
:root {
/* ─── Surface (3 levels — #Gap 2) ─────────────────────────────────
* Per craft/color.md: never pure black, never pure white. Default
* uses #FAFAFA for bg and #FFFFFF for surface — the cream-to-white
* contrast gives cards lift without a shadow. `--surface-warm` is a
* schema slot for brands that need a tertiary tier (kami's warm-sand
* button bg); default has no third tier and aliases it to surface. */
--bg: #fafafa;
--surface: #ffffff;
--surface-warm: var(--surface); /* alias — default has no warm tier */
/* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
* Default differentiates only two text levels (primary + muted).
* `--fg-2` and `--meta` are schema slots for brands with richer
* ramps (kami uses near-black / dark-warm / olive / stone). They
* alias here so components targeting the full ramp resolve. */
--fg: #111111;
--fg-2: var(--fg); /* alias — default has no secondary tier */
--muted: #6b6b6b;
--meta: var(--muted); /* alias — default has no metadata tier */
/* ─── Border (2 levels — #Gap 3) ────────────────────────────────
* Default has one border weight; `--border-soft` is a schema slot
* for brands with row-separator vs card-edge differentiation. */
--border: #e5e5e5;
--border-soft: var(--border); /* alias — default has no soft tier */
/* ─── Accent ──────────────────────────────────────────────────────
* Cobalt — primary CTAs, links, ONE hero element per screen.
* Hard cap of 2 visible uses per screen is enforced by lint
* (`accent-overuse` P1 fires at >6 inline occurrences). */
--accent: #2f6feb;
--accent-on: #ffffff; /* fg when accent is the bg (e.g. button label) */
/* ─── Accent states (#Gap 4) ────────────────────────────────────
* Hover and active variants for any element using --accent as bg.
* Default's mid-luminance cobalt admits a black-mix formula
* cleanly; that's a brand-specific binding, NOT a schema rule.
* kami binds --accent-hover to var(--accent) (no color shift,
* hover via elevation) because ink-blue is too dark for further
* darkening to read; other brands with light accents must
* hand-pick.
*
* Schema rule: every brand provides --accent-hover and
* --accent-active. The binding strategy (formula / identity /
* hand-picked) is brand-decided.
*
* Why these two are tokens (and other tints stay inline):
* - cross-component (button, chip, tab, dropdown all need them)
* - cross-mode reversal (dark-mode hover should mix white, not
* black — token re-binding is one line per mode)
* - cross-brand customization (formula breaks on light accents)
* - lint-enforceable contract (every brand must provide these)
* Other inline `color-mix(...)` calls in components don't yet hit
* any of the above — promote them to tokens when a second use
* appears. */
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
--accent-active: color-mix(in oklab, var(--accent), black 14%);
/* ─── Semantic ────────────────────────────────────────────────────
* Reserved for state, not decoration. Keep total semantic-color
* pixels under 5% of the surface. */
--success: #17a34a;
--warn: #eab308;
--danger: #dc2626;
/* ─── Typography ──────────────────────────────────────────────────
* Inter for display is the documented "modern minimal" override
* to anti-ai-slop's serif-display rule (see DESIGN.md
* §Visual Theme & Atmosphere — "Calm, functional, quietly
* confident"). Other brands should rebind --font-display to a
* serif unless their direction is also tech/utility. */
--font-display: "Inter", -apple-system, system-ui, sans-serif;
--font-body: "Inter", -apple-system, system-ui, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", monospace;
/* Type scale (px) — direct copy of DESIGN.md §Typography Rules */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 64px;
--leading-body: 1.5;
--leading-tight: 1.2;
--tracking-display: -0.01em; /* applied to display sizes ≥32px */
/* ─── Spacing ─────────────────────────────────────────────────────
* 4px base unit. Section rhythm (80/48/32) lives below as named
* tokens because DESIGN.md §Layout Principles treats them as
* breakpoint-specific decisions, not generic spacing. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-20: 80px;
--section-y-desktop: 80px;
--section-y-tablet: 48px;
--section-y-phone: 32px;
/* ─── Radius ──────────────────────────────────────────────────────
* Two intents: small (button/input) and medium (card/modal).
* `--radius-pill` reserved for chips/avatars; do not use it on
* cards or buttons. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-pill: 9999px;
/* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
* Default uses two levels (flat + raised blur shadow) per its own
* DESIGN.md §Depth & Elevation. The schema gains `--elev-ring` as
* a first-class level so brands using ring shadows as primary
* elevation (kami, paper, editorial) don't need to rebind
* --elev-raised away from blur. Default declares all three; ring
* is available for hairline edges where a 1px border would shift
* layout. No fourth level — that's neumorphism territory. */
--elev-flat: none;
--elev-ring: 0 0 0 1px var(--border);
--elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
/* ─── Focus ring ──────────────────────────────────────────────────
* Single source of truth for keyboard-focus indicators. Every
* `:focus-visible` rule on buttons, inputs, links, and tabs must
* use this token — uniform behavior is itself a brand signal, and
* craft/accessibility-baseline.md treats focus visibility as a
* non-negotiable. Implemented as a `box-shadow` so it layers
* outside the element without affecting layout. */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
/* ─── Motion ──────────────────────────────────────────────────────
* Two durations + one easing curve, per anti-ai-slop's "short,
* purposeful transitions (150–250ms) with stable easing". Add a
* third duration only when a real interaction needs it; do not
* invent `--motion-slow` speculatively. */
--motion-fast: 150ms; /* hover, focus, micro-states */
--motion-base: 200ms; /* general state changes */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
/* ─── Layout ──────────────────────────────────────────────────────
* Container width and per-breakpoint gutter. Skill-side responsive
* code reads these to decide grid columns. */
--container-max: 1200px;
--container-gutter-desktop: 24px;
--container-gutter-tablet: 16px;
--container-gutter-phone: 12px;
}