/*! @laddtnov/cyberpunk-ui — tokens.css | MIT */ :root { /* ── Neon accents ─────────────────────────────────────────── */ --cy-neon-cyan: #00f2ff; --cy-neon-pink: #ff00ff; --cy-neon-purple: #9d00ff; /* ── Surfaces ─────────────────────────────────────────────── */ --cy-bg: #0a0a0c; --cy-surface: #151518; /* ── Text ─────────────────────────────────────────────────── */ --cy-text: #d1d1d1; --cy-heading: #ffffff; /* ── Glow channels ──────────────────────────────────────────── Raw RGB triplets so glows can be built with rgba(var(--x), a) and still track the active theme. */ --cy-cyan-rgb: 0, 242, 255; --cy-pink-rgb: 255, 0, 255; --cy-purple-rgb: 157, 0, 255; /* ── Type ───────────────────────────────────────────────────── Load these fonts yourself (Google Fonts / self-hosted); the kit degrades to system fonts if they're absent. */ --cy-font-display: 'Orbitron', system-ui, sans-serif; --cy-font-body: 'Rajdhani', system-ui, sans-serif; --cy-font-mono: 'Share Tech Mono', ui-monospace, monospace; /* ── Motion ───────────────────────────────────────────────── */ --cy-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ── Geometry ─────────────────────────────────────────────── */ --cy-radius-sm: 2px; --cy-radius: 4px; --cy-radius-lg: 8px; --cy-border-width: 1px; /* ── Spacing (4px-based scale) ────────────────────────────── */ --cy-space-xs: 0.25rem; --cy-space-sm: 0.5rem; --cy-space-md: 0.75rem; --cy-space-lg: 1rem; --cy-space-xl: 1.5rem; /* ── Focus (shared by every interactive element) ──────────── */ --cy-focus-width: 2px; --cy-focus-offset: 2px; --cy-focus-color: var(--cy-neon-cyan); /* ── Status ──────────────────────────────────────────────── --cy-info aliases the cyan on purpose: its channels are already published as --cy-cyan-rgb, so there is one source of truth. */ --cy-success: #52ff9a; --cy-warning: #ffc857; --cy-danger: #ff4d4d; --cy-info: var(--cy-neon-cyan); --cy-success-rgb: 82, 255, 154; --cy-warning-rgb: 255, 200, 87; --cy-danger-rgb: 255, 77, 77; --cy-disabled-opacity: 0.45; } /* ── Light theme ────────────────────────────────────────────── The bright neon hues fail WCAG contrast on light backgrounds (cyan is ~1.2:1 on white), so cyan/pink are dimmed here. Purple already passes (~5.5:1) and is left untouched. Toggle by setting data-theme="light" on the element. */ :root[data-theme="light"] { /* #008099 measured 4.07 against --cy-bg — below the 4.5 AA floor for normal text. #00707f measures 5.10. */ --cy-neon-cyan: #00707f; --cy-neon-pink: #b3009e; --cy-bg: #f0f0f5; --cy-surface: #ffffff; --cy-text: #3a3a45; --cy-heading: #16161d; --cy-cyan-rgb: 0, 112, 127; --cy-pink-rgb: 179, 0, 158; /* Neon status hues fail contrast on a light background. */ --cy-success: #0a7d43; --cy-warning: #8a5a00; --cy-danger: #c2110f; --cy-success-rgb: 10, 125, 67; --cy-warning-rgb: 138, 90, 0; --cy-danger-rgb: 194, 17, 15; }