/* === css/variables.css === */
/*
* All CSS custom properties live here.
* User must add this to their for font loading:
*
*
*
*/
:root {
/* ── Color Palette ── */
--color-bg-deep: #050810;
--color-bg-mid: #0D1117;
--color-primary: #7C3AED;
--color-secondary: #06B6D4;
--color-accent: #F59E0B;
--color-text-main: #F1F5F9;
--color-text-muted: #64748B;
--color-glow-purple: rgba(124, 58, 237, 0.35);
--color-glow-cyan: rgba(6, 182, 212, 0.25);
--color-glow-amber: rgba(245, 158, 11, 0.45);
--color-card-bg: rgba(255, 255, 255, 0.04);
--color-card-border: rgba(255, 255, 255, 0.08);
/* ── Typography ── */
--font-display: 'Syne', sans-serif;
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
/* ── Shapes ── */
--radius-card: 20px;
--radius-pill: 999px;
/* ── Motion ── */
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}