/* ============================================
SPINPRO DESIGN TOKENS - SINGLE SOURCE OF TRUTH
============================================
This file defines all design tokens used across SpinPro.
Import this file FIRST in your CSS to ensure consistency.
Order: Import in
... other CSS files ...
*/
:root {
/* ===== COLOR TOKENS (Light + Green Nav) ===== */
/* Page & Navigation */
--color-page-bg-top: #fcfcfe;
--color-page-bg-bottom: #d0d1d6;
--color-nav-top: #051f20;
--color-nav-rail: #163832;
--color-nav-accent: #00cae8;
/* Surfaces & Borders */
--color-surface-1: #ffffff;
--color-surface-2: #f5f5f5;
--color-surface-hover: #fafafa;
--color-border: #e0e0e0;
/* Text */
--color-text-primary: #1a1a1a;
--color-text-secondary: #666666;
--color-text-muted: #999999;
--color-text-inverse: #ffffff;
/* Accents (aliases kept for compatibility) */
--color-primary-cyan: #00cae8;
--color-neon-cyan: #00cae8;
--color-accent-magenta: #e713b0;
--color-neon-purple: #7800ff;
--color-accent-green: #01ff14;
--color-neon-green: #01ff14;
--color-accent-orange: #ff8203;
--color-accent-blue: #15b4ff;
--color-accent-purple: #7800ff;
--color-accent-gold: #c9980b;
/* Semantic */
--color-success: var(--color-accent-green);
--color-warning: var(--color-accent-orange);
--color-error: #ff1813;
--color-error-light: #ff9a9a;
--color-error-dark: #d11212;
--color-info: var(--color-accent-blue);
/* Navigation text */
--color-nav-text: #ffffff;
--color-nav-text-muted: rgba(255, 255, 255, 0.8);
/* ===== GLASS EFFECT TOKENS ===== */
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-bg-hover: rgba(255, 255, 255, 0.85);
--glass-border: rgba(0, 202, 232, 0.2);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
/* ===== GLOW EFFECTS ===== */
--glow-cyan: 0 0 20px rgba(0, 202, 232, 0.4);
--glow-cyan-lg: 0 0 30px rgba(0, 202, 232, 0.6);
--glow-magenta: 0 0 20px rgba(231, 19, 176, 0.4);
--glow-green: 0 0 20px rgba(1, 255, 20, 0.3);
--glow-orange: 0 0 20px rgba(255, 130, 3, 0.3);
--glow-purple: 0 0 20px rgba(120, 0, 255, 0.3);
/* ===== GRADIENT TOKENS ===== */
--gradient-page: linear-gradient(180deg, #fcfcfe 0%, #d0d1d6 100%);
--gradient-nav: linear-gradient(180deg, #051f20 0%, #163832 100%);
--gradient-red-knowledge: linear-gradient(135deg, #9c1012 0%, #5b0e17 100%);
/* ===== BACKDROP FILTER ===== */
--backdrop-blur: blur(10px);
--backdrop-blur-sm: blur(6px);
--backdrop-blur-lg: blur(14px);
/* ===== LAYOUT TOKENS ===== */
--footer-height: 40px;
--sidebar-width: 280px;
--sidebar-width-collapsed: 80px;
--header-height: 60px;
--main-content-padding: 16px;
/* ===== SPACING TOKENS (Tight) ===== */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-xxl: 24px;
/* ===== BORDER RADIUS TOKENS ===== */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* ===== FONT SIZE TOKENS (Aligned to Blueprint) ===== */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.75rem; /* 28px */
--font-size-4xl: 2rem; /* 32px */
/* ===== FONT WEIGHT TOKENS ===== */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* ===== LINE HEIGHT TOKENS ===== */
--line-height-tight: 1.2;
--line-height-normal: 1.38;
--line-height-relaxed: 1.6;
--line-height-loose: 1.8;
/* ===== TRANSITION TOKENS ===== */
--transition-fast: 0.15s ease;
--transition-base: 0.25s ease;
--transition-slow: 0.4s ease;
--transition-slowest: 0.6s ease;
/* ===== Z-INDEX TOKENS ===== */
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
/* ===== BREAKPOINT TOKENS (for reference) ===== */
--breakpoint-xs: 0px;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-2xl: 1400px;
}
/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: more) {
:root {
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(0, 255, 200, 0.3);
--glow-cyan: 0 0 25px rgba(0, 255, 200, 0.7);
}
}
/* ===== DARK MODE (if ever needed) ===== */
@media (prefers-color-scheme: dark) {
:root {
--color-bg-light: #1a1a2e;
--color-text-primary: #ffffff;
}
}
/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0s;
--transition-base: 0s;
--transition-slow: 0s;
--transition-slowest: 0s;
}
}