/* Theme tokens — CSS custom properties for the Holofoil theme. * * The scrapbook (default) theme keeps its inline hex values in styles.css. * This file declares only the *override* tokens that activate when the user * selects the Holofoil theme via the Settings menu or `?theme=holofoil` URL * param. Tokens are attached to the documentElement (``) so they * cascade to every descendant regardless of where the theme attribute lands. * * See js/theme.js for the runtime gate, theme-holofoil.css for the rules * that consume these tokens, and CLAUDE.md "Holofoil theme" section for the * project-wide adoption plan. * * Story 1 of the Holofoil adoption — token layer + kill-switch only, * no visible chrome changes ship yet. Stories 2-6 fill in the surfaces. */ [data-theme="holofoil"] { /* Background gradient stops — visibly purple at every scroll position */ --holo-bg-1: #200055; --holo-bg-2: #2d0870; --holo-bg-3: #4800a0; /* Text */ --holo-ink: #f5f3ff; --holo-ink-dim: rgba(245, 243, 255, 0.65); --holo-ink-faint: rgba(245, 243, 255, 0.38); /* Hairlines & borders */ --holo-line: rgba(192, 132, 252, 0.18); --holo-line-strong: rgba(192, 132, 252, 0.32); /* Neon accents */ --holo-violet: #c084fc; --holo-pink: #ec4899; --holo-cyan: #22d3ee; --holo-lime: #d4ff5b; /* Semantic mapping (use these in rules; the raw neons stay for gradients) */ --holo-accent: var(--holo-violet); --holo-accent-2: var(--holo-pink); --holo-accent-success: var(--holo-lime); --holo-accent-info: var(--holo-cyan); /* Glow color stops (pre-baked rgba for drop-shadow / box-shadow) */ --holo-glow-violet: rgba(192, 132, 252, 0.45); --holo-glow-pink: rgba(236, 72, 153, 0.45); --holo-glow-lime: rgba(212, 255, 91, 0.45); /* Iridescent gradient — reused for shimmer keyframes and active states */ --holo-rainbow: linear-gradient( 90deg, #ff6b9d 0%, #c084fc 25%, #22d3ee 50%, #d4ff5b 75%, #ff6b9d 100% ); }