/* ============================================================================ Visin — web design tokens (single shared source of truth) Served at /assets/tokens.css. Linked by landing.html + all 4 share-page templates. Replaces the two previously-drifting :root copies. Colour identity varies BY CONTENT TYPE (mirrors the app's own themeability): one OKLCH family — fixed lightness/chroma, hue rotated per content type. Each accent value is written twice: a plain-hex fallback first, then the oklch() source-of-truth; engines that don't parse oklch() keep the hex. All accent/neutral pairs verified >=4.5:1 WCAG contrast before commit. ============================================================================ */ :root { color-scheme: light dark; /* ── Warm neutrals (light) ───────────────────────────────────────────── */ --ink: #1B1A17; /* warm near-black (not flat #000) */ --paper: #F6F3EC; /* warm off-white (not cold #EFEDF2) */ --surface: #FFFFFF; --surface-alt: #EFEAE0; --muted: #6B675C; /* warm grey — 5.09:1 on paper */ --border: #E4DDD0; /* warm hairline */ /* ── Default accent = landing (burnt amber). Share pages override below. ── */ --accent: #8C3F00; --accent: oklch(0.46 0.13 55); --accent-tint: color-mix(in srgb, var(--accent) 10%, transparent); --accent-ink: #FFFFFF; /* text/icon on a solid --accent fill */ /* ── Typography ──────────────────────────────────────────────────────── */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace; /* ── Radius scale (intentional, NOT uniform) ─────────────────────────── */ --r-sharp: 4px; /* structural: chips, badges, buttons */ --r-soft: 10px; /* content cards */ --r-float: 16px; /* genuinely-floating: install banner, sticky bar, modals */ /* ── Shadow (reserved for floating elements; cards use a border instead) ─ */ --shadow-none: none; --shadow-soft: 0 2px 10px rgba(27,26,23,0.05); --shadow-float: 0 12px 32px rgba(27,26,23,0.16); --grain-opacity: 0.5; } /* Per-content-type accent — share templates set */ [data-accent="recipe"] { --accent:#92361F; --accent: oklch(0.46 0.13 35); } [data-accent="plan"] { --accent:#186A23; --accent: oklch(0.46 0.13 145); } [data-accent="routine"] { --accent:#29559F; --accent: oklch(0.46 0.13 260); } [data-accent="interval"] { --accent:#BE222A; --accent: oklch(0.52 0.19 25); } /* ── Dark mode — warm dark neutrals + lightened accents (own family, NOT a copy of the app's in-app #121212 UI theme) ───────────────────────── */ @media (prefers-color-scheme: dark) { :root { --ink: #F3F0E9; --paper: #1C1A16; --surface: #262319; --surface-alt: #2E2A1F; --muted: #A39D8E; --border: #3A3527; --accent: #D39562; --accent: oklch(0.72 0.10 60); --accent-ink: #1B1A17; --shadow-soft: 0 2px 10px rgba(0,0,0,0.30); --shadow-float: 0 12px 32px rgba(0,0,0,0.45); --grain-opacity: 0.35; } [data-accent="recipe"] { --accent:#E08C71; --accent: oklch(0.72 0.11 38); } [data-accent="plan"] { --accent:#7EBC87; --accent: oklch(0.74 0.10 148); } [data-accent="routine"] { --accent:#88ABEA; --accent: oklch(0.74 0.10 262); } [data-accent="interval"] { --accent:#E8796C; --accent: oklch(0.70 0.14 28); } }