/* ========================================================================== variables.css Central design-token system for Number Plus Formatter Pro. Every color, spacing, radius, shadow and timing value used across the app is declared here so themes can be swapped by re-assigning a single attribute on . ========================================================================== */ :root { /* ---------- Base surfaces (Dark theme — default) ---------- */ --bg-deep-navy: #0a0e17; --bg-charcoal: #11151f; --bg-surface: #141926; --bg-surface-raised: #1a2032; --bg-glass: rgba(255, 255, 255, 0.045); --bg-glass-strong: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.09); --border-glass-strong: rgba(255, 255, 255, 0.16); /* ---------- Accents ---------- */ --accent-blue: #4f7cff; --accent-blue-soft: #4f7cff33; --accent-purple: #9b5cff; --accent-purple-soft: #9b5cff33; --accent-cyan: #22d3ee; --accent-cyan-soft: #22d3ee33; --gradient-primary: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 55%, var(--accent-cyan) 100%); --gradient-primary-hover: linear-gradient(135deg, #6b8fff 0%, #ac74ff 55%, #3fe2fc 100%); --gradient-text: linear-gradient(135deg, #8fb2ff 0%, #c7a6ff 55%, #7fe6f7 100%); --gradient-bg-1: radial-gradient(circle at 15% 20%, rgba(79, 124, 255, 0.16), transparent 45%); --gradient-bg-2: radial-gradient(circle at 85% 15%, rgba(155, 92, 255, 0.14), transparent 45%); --gradient-bg-3: radial-gradient(circle at 50% 90%, rgba(34, 211, 238, 0.10), transparent 50%); /* ---------- Semantic ---------- */ --color-success: #34d399; --color-success-soft: #34d39926; --color-warning: #fbbf24; --color-warning-soft: #fbbf2426; --color-error: #f87171; --color-error-soft: #f8717126; --color-info: var(--accent-cyan); --color-info-soft: var(--accent-cyan-soft); /* ---------- Text ---------- */ --text-primary: #f3f5f9; --text-secondary: #9aa3b8; --text-tertiary: #6b7386; --text-on-accent: #0a0e17; --text-link: var(--accent-cyan); /* ---------- Typography ---------- */ --font-display: 'Poppins', 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Spacing scale ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3.5rem; /* ---------- Radii ---------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* ---------- Shadows ---------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-glow-blue: 0 0 32px rgba(79, 124, 255, 0.35); --shadow-glow-purple: 0 0 32px rgba(155, 92, 255, 0.30); /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms; /* ---------- Layout ---------- */ --max-width: 1320px; --header-height: 72px; --blur-glass: 20px; } /* ---------- Theme: Darker ---------- */ html[data-theme='darker'] { --bg-deep-navy: #05070c; --bg-charcoal: #090b12; --bg-surface: #0b0e17; --bg-surface-raised: #10131f; --border-glass: rgba(255, 255, 255, 0.06); --border-glass-strong: rgba(255, 255, 255, 0.12); } /* ---------- Theme: Blue ---------- */ html[data-theme='blue'] { --bg-deep-navy: #060c1c; --bg-charcoal: #0a1226; --bg-surface: #0d1830; --bg-surface-raised: #112040; --accent-purple: #4f7cff; --accent-purple-soft: #4f7cff33; --gradient-primary: linear-gradient(135deg, #3d64e0 0%, #4f7cff 55%, #22d3ee 100%); --gradient-text: linear-gradient(135deg, #7fa3ff 0%, #8fb2ff 55%, #7fe6f7 100%); } /* ---------- Theme: Purple ---------- */ html[data-theme='purple'] { --bg-deep-navy: #0c081c; --bg-charcoal: #120b28; --bg-surface: #170d33; --bg-surface-raised: #1e1142; --accent-blue: #9b5cff; --accent-blue-soft: #9b5cff33; --gradient-primary: linear-gradient(135deg, #9b5cff 0%, #c084fc 55%, #e879f9 100%); --gradient-text: linear-gradient(135deg, #c7a6ff 0%, #e0b3ff 55%, #f5b8f9 100%); }