/* ============================================================================
AYUDA — colors_and_type.css
The single source of truth for Ayuda's visual foundations.
Ayuda is a calm, paper-like writing companion. The whole theme system runs on
CSS custom properties scoped to :root[data-theme="sepia|light|dark|custom"].
These token NAMES are a hard contract with the app's JS — keep them stable.
Load order in production: this file (or tokens.css) first, then base/components.
For standalone mocks: just this file and use the --ws-* / type vars.
========================================================================== */
/* ---------------------------------------------------------------------------
1. FONTS
UI : Inter (Google Fonts — loaded via in the host page)
Prose: Iowan Old Style → Georgia → serif
Iowan Old Style ships on Apple platforms only; Georgia is the
cross-platform fallback and is what most mocks will actually render.
Mono : ui-monospace / SFMono / Menlo (find-and-replace, code, counts)
--------------------------------------------------------------------------- */
:root {
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-prose: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
--font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}
/* ---------------------------------------------------------------------------
2. THEME TOKENS (the --ws-* contract)
Every surface, ink, accent and highlight reads from these. Switching the
data-theme attribute on re-skins the entire product.
Roles:
--ws-surface page / canvas background (the "paper")
--ws-surface-2 raised chrome: rail, toolbar, headers, popovers
--ws-card-bg cards: drafts, advice notes, suggestions
--ws-ink primary text
--ws-ink-soft secondary text, labels, meta
--ws-border hairlines and card edges
--ws-accent primary brand accent — SAGE GREEN (links, focus, active)
--ws-accent-2 secondary accent — OCHRE / AMBER (warm emphasis)
--ws-hl-show inline highlight: "show, don't tell" (ochre)
--ws-hl-active inline highlight: "active voice" (sage)
--ws-hl-default inline highlight: other / style notes (dusty plum)
--ws-shadow shadow color (carries the warmth of the theme)
--------------------------------------------------------------------------- */
/* ----- SEPIA — the default. Warm paper, the product's soul. --------------- */
:root,
:root[data-theme="sepia"] {
--ws-surface: #f3ead7;
--ws-surface-2: #ece0c9;
--ws-card-bg: #efe6d3;
--ws-ink: #3a2f25;
--ws-ink-soft: #6b5d4d;
--ws-border: rgba(58, 47, 37, .16);
--ws-accent: #5f8c6a;
--ws-accent-2: #a9762f;
--ws-hl-show: #a9762f;
--ws-hl-active: #5f8c6a;
--ws-hl-default:#8a6fb0;
--ws-error: #c0392b;
--ws-shadow: rgba(58, 47, 37, .20);
}
/* ----- LIGHT — clean daylight paper, cooler neutrals ---------------------- */
:root[data-theme="light"] {
--ws-surface: #ffffff;
--ws-surface-2: #f6f6f4;
--ws-card-bg: #f6f6f4;
--ws-ink: #1f2328;
--ws-ink-soft: #57606a;
--ws-border: rgba(0, 0, 0, .12);
--ws-accent: #3f7d57;
--ws-accent-2: #b3711a;
--ws-hl-show: #b3711a;
--ws-hl-active: #3f7d57;
--ws-hl-default:#7559a8;
--ws-error: #c0392b;
--ws-shadow: rgba(0, 0, 0, .14);
}
/* ----- DARK — ink-on-slate, low stimulation for night writing ------------- */
:root[data-theme="dark"] {
--ws-surface: #1a1d24;
--ws-surface-2: #222732;
--ws-card-bg: rgba(255, 255, 255, .05);
--ws-ink: #e6edf3;
--ws-ink-soft: rgba(230, 237, 243, .62);
--ws-border: rgba(255, 255, 255, .12);
--ws-accent: #6cc7a1;
--ws-accent-2: #e0a458;
--ws-hl-show: #e0a458;
--ws-hl-active: #6cc7a1;
--ws-hl-default:#9a8cff;
--ws-error: #e06c63;
--ws-shadow: rgba(0, 0, 0, .45);
}
/* ----- CUSTOM — inherits sepia; JS sets surface/ink/accent inline from the
user's chosen background + accent (see the no-flash boot script). --------- */
:root[data-theme="custom"] {
--ws-surface: #f3ead7;
--ws-surface-2: #ece0c9;
--ws-card-bg: #efe6d3;
--ws-ink: #3a2f25;
--ws-ink-soft: #6b5d4d;
--ws-border: rgba(58, 47, 37, .16);
--ws-accent: #5f8c6a;
--ws-accent-2: #a9762f;
--ws-error: #c0392b;
--ws-shadow: rgba(58, 47, 37, .20);
}
/* ---------------------------------------------------------------------------
3. READING ERGONOMICS (the editor's core promise)
The serif measure is deliberately narrow (~680px) with airy line-height.
These are user-adjustable in Appearance; defaults below.
--------------------------------------------------------------------------- */
:root {
--ws-font: var(--font-prose);
--ws-fontsize: 16px; /* 14–22 user range */
--ws-maxw: 680px; /* narrow 600 · medium 680 · wide 820 */
--ws-lh: 1.9; /* tight 1.6 · normal 1.9 · relaxed 2.15 */
}
/* ---------------------------------------------------------------------------
4. TYPE SCALE (UI chrome — Inter)
A restrained scale. Chrome is quiet so prose can be loud.
--------------------------------------------------------------------------- */
:root {
--text-xs: 12px; /* meta, counts, labels (uppercased) */
--text-sm: 13px; /* secondary UI, card body */
--text-base: 14px; /* default UI text, buttons, inputs */
--text-md: 15px; /* nav, emphasized UI */
--text-lg: 18px; /* card titles, section leads */
--text-xl: 22px; /* view headers (Your drafts, Advice library) */
--text-2xl: 28px; /* auth title, big moments */
--text-3xl: 34px; /* rare display */
--weight-regular: 400;
--weight-medium: 500;
--weight-semi: 600;
--weight-bold: 700;
--tracking-label: .07em; /* uppercased eyebrow labels */
--tracking-tight: -.01em; /* large headings */
--leading-ui: 1.45;
}
/* ---------------------------------------------------------------------------
5. SEMANTIC TYPE (apply-and-go classes for mocks & docs)
--------------------------------------------------------------------------- */
.ay-display {
font-family: var(--font-ui);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
line-height: 1.15;
color: var(--ws-ink);
}
.ay-h1 {
font-family: var(--font-ui);
font-size: var(--text-xl);
font-weight: var(--weight-semi);
letter-spacing: var(--tracking-tight);
color: var(--ws-ink);
}
.ay-h2 {
font-family: var(--font-ui);
font-size: var(--text-lg);
font-weight: var(--weight-semi);
color: var(--ws-ink);
}
.ay-label {
font-family: var(--font-ui);
font-size: var(--text-xs);
font-weight: var(--weight-semi);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--ws-ink-soft);
}
.ay-ui {
font-family: var(--font-ui);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-ui);
color: var(--ws-ink);
}
.ay-meta {
font-family: var(--font-ui);
font-size: var(--text-xs);
color: var(--ws-ink-soft);
}
.ay-mono {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--ws-ink-soft);
font-variant-numeric: tabular-nums;
}
/* The reading surface — Ayuda's reason for existing. */
.ay-prose {
font-family: var(--ws-font);
font-size: var(--ws-fontsize);
line-height: var(--ws-lh);
color: var(--ws-ink);
max-width: var(--ws-maxw);
}
.ay-prose-lead { /* the airy serif first line / pull quote */
font-family: var(--ws-font);
font-style: italic;
color: var(--ws-ink-soft);
line-height: 1.6;
}
/* ---------------------------------------------------------------------------
6. SPACING · RADII · SHADOWS · MOTION
--------------------------------------------------------------------------- */
:root {
/* spacing — 4px base rhythm */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* radii — soft, paper-cut, never pill-y on big surfaces */
--r-xs: 6px; /* buttons, inputs, pills */
--r-sm: 8px; /* advice cards */
--r-md: 10px; /* draft cards, popovers */
--r-lg: 14px; /* modals, auth card */
--r-full: 999px;
/* shadows — warm, soft, low. Carry --ws-shadow so they re-tint per theme. */
--shadow-sm: 0 1px 2px var(--ws-shadow);
--shadow-md: 0 4px 16px var(--ws-shadow);
--shadow-lg: 0 12px 36px var(--ws-shadow);
/* focus — sage ring, generous, accessible */
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--ws-accent) 38%, transparent);
/* motion — quiet. Gentle ease, short fades. No bounce, no spring. */
--ease: cubic-bezier(.2, .6, .25, 1);
--dur-fast: 120ms;
--dur: 180ms;
--dur-slow: 280ms;
}