/* ═══════════════════════════════════════════════════════════════════════ _theme.css — Lumen Slide Theme Template ═══════════════════════════════════════════════════════════════════════ HOW TO USE THIS TEMPLATE ───────────────────────── 1. Copy this file to one of the locations below. 2. Change the hex / rgba values to match your brand or mood. 3. Customize font-family strings to use your preferred typefaces. 4. Delete any token categories you do not need — the defaults in lumen-slides will fill the gaps. WHERE TO PLACE YOUR CUSTOMIZED FILE ───────────────────────────────────── The lumen-slides engine looks for a user theme in this order: 1. /_theme.css (per-project override) 2. ~/.agent/lumen/_theme.css (user-global override) 3. Built-in preset (fallback) If a token is defined in (1), it wins. Missing tokens are inherited from (2), then from the built-in preset. This means you can override just a few accent colors in a project theme while keeping the rest of your global palette. DARK / LIGHT VARIANTS ───────────────────── This template uses `prefers-color-scheme` media queries so the deck automatically adapts to the viewer's OS setting. If you want to force a mode, add `data-theme="dark"` or `data-theme="light"` to the `` tag and duplicate the override blocks from any built-in preset (e.g., editorial.css or blueprint.css). ═══════════════════════════════════════════════════════════════════════ */ /* ── Base color-scheme hint for the browser chrome ── */ :root { color-scheme: light dark; } /* ═══════════════════════════════════════════════════════════════════════ BASELINE TOKENS — Dark (default) These form the surface and text hierarchy of every slide. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Background — the deepest layer, fills the viewport behind slides */ --bg: #0f172a; /* Surface — card backgrounds, code blocks, panels */ --surface: #1e293b; /* Surface2 — secondary surfaces, alternating rows, inner panels */ --surface2: #283548; /* Surface Elevated — popovers, floating elements, highest surface tier */ --surface-elevated: #334155; /* Border — dividers, card outlines, table borders. Use low-opacity rgba() so borders remain subtle on both dark and light backgrounds. */ --border: rgba(148, 163, 184, 0.12); /* Border Bright — stronger borders for focus states, active tabs, emphasized dividers. Slightly higher opacity than --border. */ --border-bright: rgba(148, 163, 184, 0.24); /* Text — headings, primary body copy, strong emphasis. Must have AAA contrast against --bg. */ --text: #f8fafc; /* Text Muted — body paragraphs, descriptions, secondary content. Readable but visually de-emphasized compared to --text. */ --text-muted: #cbd5e1; /* Text Dim — captions, labels, metadata, timestamps, fine print. Lowest text tier; still legible at projection distance. */ --text-dim: #64748b; } /* ═══════════════════════════════════════════════════════════════════════ ACCENT TOKENS One dominant accent color that carries the brand identity. Used for progress bars, active dots, bullet markers, CTAs, and decorative SVG strokes. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Accent — primary brand color. Should pop against --bg. */ --accent: #22d3ee; /* Accent Dim — very low-opacity version for background washes, hover states, and glow gradients. Keep at 0.06–0.12 opacity. */ --accent-dim: rgba(34, 211, 238, 0.1); /* Accent Glow — slightly stronger than dim, used for text-shadows, radial gradient halos on title slides, and ambient lighting. */ --accent-glow: rgba(34, 211, 238, 0.25); } /* ═══════════════════════════════════════════════════════════════════════ SEMANTIC TOKENS Status and feedback colors. Used for badges, alerts, KPI indicators, pipeline step borders, and card accent stripes. ═══════════════════════════════════════════════════════════════════════ */ :root { /* Success — positive states, completed tasks, healthy metrics */ --success: #34d399; --success-dim: rgba(52, 211, 153, 0.12); /* Warning — caution states, pending items, attention needed */ --warning: #fbbf24; --warning-dim: rgba(251, 191, 36, 0.12); /* Error — failures, critical alerts, blocked states */ --error: #f87171; --error-dim: rgba(248, 113, 113, 0.12); /* Info — neutral informational highlights, tips, hints */ --info: #60a5fa; --info-dim: rgba(96, 165, 250, 0.12); } /* ═══════════════════════════════════════════════════════════════════════ EXTENDED PALETTE Named color aliases for diagramming, architecture slides, and multi-category dashboards. Each pairs with a `-dim` variant for background badges and washed surfaces. ═══════════════════════════════════════════════════════════════════════ */ :root { --cyan: #22d3ee; --cyan-dim: rgba(34, 211, 238, 0.12); --green: #34d399; --green-dim: rgba(52, 211, 153, 0.12); --amber: #fbbf24; --amber-dim: rgba(251, 191, 36, 0.12); --orange: #fb923c; --orange-dim: rgba(251, 146, 60, 0.12); --red: #f87171; --red-dim: rgba(248, 113, 113, 0.12); --purple: #c084fc; --purple-dim: rgba(192, 132, 252, 0.12); --pink: #f472b6; --pink-dim: rgba(244, 114, 182, 0.12); } /* ═══════════════════════════════════════════════════════════════════════ TYPOGRAPHY TOKENS Three font roles: body (paragraphs, bullets), mono (code, labels, counters), and display (hero titles, oversized section numbers). Add Google Fonts or self-hosted @font-face rules in a