/* curlo — Design Tokens * Framework-agnostic. Load this first in ANY stack (WordPress, Django, plain HTML, * Tailwind, etc.) to get the full curlo palette, type, spacing and elevation as * CSS custom properties. Everything else in curlo is built on these. * All tokens are namespaced with --curlo-* to avoid collisions with host styles. * * THEMING * Light is the default (friendly for non-technical portal users). * Opt into dark by setting (persist the choice yourself * or use the toggle pattern shown in the brand book / README). * Terminals and code blocks stay dark in BOTH themes — that's the signature look. */ :root { /* ============ CONSTANT: brand palette (same in every theme) ============ */ --curlo-green: #4ADE80; /* signal green — the hero */ --curlo-green-strong: #22C55E; --curlo-cyan: #38BDF8; /* wire cyan */ --curlo-cyan-strong: #0EA5E9; --curlo-amber: #FBBF24; /* prompt amber */ --curlo-amber-strong: #F59E0B; --curlo-rose: #FB7185; /* danger */ --curlo-rose-strong: #F43F5E; --curlo-magenta: #F472B6; /* syntax highlight only */ /* Semantic brand roles — the vivid values (used for FILLS: buttons, badges, dots) */ --curlo-primary: var(--curlo-green); --curlo-primary-strong: var(--curlo-green-strong); --curlo-secondary: var(--curlo-cyan); --curlo-secondary-strong: var(--curlo-cyan-strong); --curlo-accent: var(--curlo-amber); --curlo-accent-strong: var(--curlo-amber-strong); --curlo-success: var(--curlo-green); --curlo-success-strong: var(--curlo-green-strong); --curlo-warning: var(--curlo-amber); --curlo-warning-strong: var(--curlo-amber-strong); --curlo-danger: var(--curlo-rose); --curlo-danger-strong: var(--curlo-rose-strong); --curlo-info: var(--curlo-cyan); --curlo-info-strong: var(--curlo-cyan-strong); /* Dark ink for text placed ON light-colored fills (green/cyan/amber buttons) */ --curlo-on-accent: #04121F; /* Soft tints (constant rgba) for hover/soft backgrounds */ --curlo-primary-tint: rgb(74 222 128 / 0.14); --curlo-secondary-tint: rgb(56 189 248 / 0.14); --curlo-accent-tint: rgb(251 191 36 / 0.16); --curlo-danger-tint: rgb(251 113 133 / 0.14); /* ============ CONSTANT: terminal / code surface (always dark) ============ */ --curlo-code-bg: #0B0E14; --curlo-code-bar: #0D111A; --curlo-code-line: #1E2A3D; --curlo-code-text: #E6EDF3; --curlo-code-muted: #7E8CA0; /* ============ CONSTANT: typography ============ */ --curlo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --curlo-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --curlo-line-height: 1.65; /* ============ CONSTANT: radius / spacing / motion ============ */ --curlo-radius: 0.75rem; --curlo-radius-sm: 0.5rem; --curlo-radius-lg: 1rem; --curlo-radius-pill: 999px; --curlo-space-1: 0.25rem; --curlo-space-2: 0.5rem; --curlo-space-3: 0.75rem; --curlo-space-4: 1rem; --curlo-space-5: 1.5rem; --curlo-space-6: 2rem; --curlo-transition: all 0.18s ease; --curlo-glow: 0 8px 26px -10px rgb(74 222 128 / 0.55); --curlo-glow-text: 0 0 18px rgb(74 222 128 / 0.45); --curlo-focus-ring: 0 0 0 3px rgb(74 222 128 / 0.35); /* ============ THEME: LIGHT (default) ============ */ --curlo-ink: #EEF1F6; /* app background — soft off-white, easy on the eyes */ --curlo-surface: #F9FAFC; /* panels / cards — slightly brighter so they gently pop */ --curlo-surface-2: #E9EDF3; /* raised / headers */ --curlo-surface-3: #E1E7EF; /* inputs / tracks */ --curlo-line: #DCE3EC; /* borders / hairlines */ --curlo-line-strong: #C4CEDA; --curlo-text: #17212E; /* primary text — dark slate, not jet black */ --curlo-muted: #5B6675; /* secondary text */ /* Readable accent colors for TEXT/links/icons on the page (theme-aware) */ --curlo-primary-ink: #15803D; /* green-700 */ --curlo-secondary-ink: #0284C7; /* sky-600 */ --curlo-accent-ink: #B45309; /* amber-700 */ --curlo-danger-ink: #E11D48; /* rose-600 */ --curlo-nav-bg: rgb(244 246 250 / 0.82); --curlo-body-bg-image: none; --curlo-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.08); --curlo-shadow-md: 0 6px 16px -6px rgb(15 23 42 / 0.16); --curlo-shadow-lg: 0 22px 44px -22px rgb(15 23 42 / 0.28); } /* ============ THEME: DARK (opt-in via ) ============ */ [data-theme="dark"] { --curlo-ink: #0B0E14; --curlo-surface: #111725; --curlo-surface-2: #161E2E; --curlo-surface-3: #1B2434; --curlo-line: #253042; --curlo-line-strong: #33445C; --curlo-text: #E6EDF3; --curlo-muted: #8B97A7; --curlo-primary-ink: var(--curlo-green); --curlo-secondary-ink: var(--curlo-cyan); --curlo-accent-ink: var(--curlo-amber); --curlo-danger-ink: var(--curlo-rose); --curlo-nav-bg: rgb(11 14 20 / 0.80); --curlo-body-bg-image: radial-gradient(650px circle at 12% -5%, rgb(20 53 31 / 0.35), transparent 60%), radial-gradient(700px circle at 100% 0%, rgb(16 35 58 / 0.40), transparent 55%); --curlo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40); --curlo-shadow-md: 0 6px 16px -6px rgb(0 0 0 / 0.60); --curlo-shadow-lg: 0 22px 44px -22px rgb(0 0 0 / 0.80); }