hf-data-engine/static/css/design-tokens.css

/**
 * ============================================
 * DESIGN TOKENS - Enterprise Edition
 * Crypto Monitor Ultimate
 * ============================================
 *
 * Complete design system with:
 * - Color palette (light/dark)
 * - Typography scale
 * - Spacing system
 * - Border radius tokens
 * - Shadow system
 * - Blur tokens
 * - Elevation levels
 * - Animation timings
 */

:root {
    /* ===== COLOR PALETTE ===== */

    /* Base Colors - Dark Mode */
    --color-bg-primary: #0a0e1a;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #1f2937;
    --color-bg-elevated: #1f2937;
    --color-bg-overlay: rgba(0, 0, 0, 0.75);

    /* Glassmorphism Backgrounds */
    --color-glass-bg: rgba(17, 24, 39, 0.7);
    --color-glass-bg-light: rgba(31, 41, 55, 0.5);
    --color-glass-border: rgba(255, 255, 255, 0.1);

    /* Text Colors */
    --color-text-primary: #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-text-tertiary: #6b7280;
    --color-text-disabled: #4b5563;
    --color-text-inverse: #0a0e1a;

    /* Accent Colors - Neon Palette */
    --color-accent-blue: #3b82f6;
    --color-accent-blue-dark: #2563eb;
    --color-accent-blue-light: #60a5fa;

    --color-accent-purple: #8b5cf6;
    --color-accent-purple-dark: #7c3aed;
    --color-accent-purple-light: #a78bfa;

    --color-accent-pink: #ec4899;
    --color-accent-pink-dark: #db2777;
    --color-accent-pink-light: #f472b6;

    --color-accent-green: #10b981;
    --color-accent-green-dark: #059669;
    --color-accent-green-light: #34d399;

    --color-accent-yellow: #f59e0b;
    --color-accent-yellow-dark: #d97706;
    --color-accent-yellow-light: #fbbf24;

    --color-accent-red: #ef4444;
    --color-accent-red-dark: #dc2626;
    --color-accent-red-light: #f87171;

    --color-accent-cyan: #06b6d4;
    --color-accent-cyan-dark: #0891b2;
    --color-accent-cyan-light: #22d3ee;

    /* Semantic Colors */
    --color-success: var(--color-accent-green);
    --color-error: var(--color-accent-red);
    --color-warning: var(--color-accent-yellow);
    --color-info: var(--color-accent-blue);

    /* Border Colors */
    --color-border-primary: rgba(255, 255, 255, 0.1);
    --color-border-secondary: rgba(255, 255, 255, 0.05);
    --color-border-focus: var(--color-accent-blue);

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --gradient-glass: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(31, 41, 55, 0.4) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.8) 100%);

    /* Radial Gradients for Background */
    --gradient-radial-blue: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%);
    --gradient-radial-purple: radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 40%);
    --gradient-radial-green: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.1) 0%, transparent 30%);

    /* ===== TYPOGRAPHY ===== */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-md: 1.125rem;     /* 18px */
    --font-size-lg: 1.25rem;      /* 20px */
    --font-size-xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.875rem;    /* 30px */
    --font-size-3xl: 2.25rem;     /* 36px */
    --font-size-4xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* ===== SPACING SCALE ===== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */

    /* Semantic Spacing */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);

    /* ===== BORDER RADIUS ===== */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-base: 0.5rem;   /* 8px */
    --radius-md: 0.75rem;    /* 12px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.25rem;    /* 20px */
    --radius-2xl: 1.5rem;    /* 24px */
    --radius-3xl: 2rem;      /* 32px */
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* Colored Shadows */
    --shadow-blue: 0 10px 30px -5px rgba(59, 130, 246, 0.3);
    --shadow-purple: 0 10px 30px -5px rgba(139, 92, 246, 0.3);
    --shadow-pink: 0 10px 30px -5px rgba(236, 72, 153, 0.3);
    --shadow-green: 0 10px 30px -5px rgba(16, 185, 129, 0.3);

    /* Inner Shadows */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.1);

    /* ===== BLUR TOKENS ===== */
    --blur-none: 0;
    --blur-sm: 4px;
    --blur-base: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 20px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;

    /* ===== ELEVATION LEVELS ===== */
    /* Use these for layering UI elements */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;

    /* ===== ANIMATION TIMINGS ===== */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

    /* Easing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ===== LAYOUT ===== */
    --header-height: 72px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --mobile-nav-height: 64px;

    --container-max-width: 1920px;
    --content-max-width: 1440px;

    /* ===== BREAKPOINTS (for JS usage) ===== */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 480px;
    --breakpoint-md: 640px;
    --breakpoint-lg: 768px;
    --breakpoint-xl: 1024px;
    --breakpoint-2xl: 1280px;
    --breakpoint-3xl: 1440px;
}

/* ===== LIGHT MODE OVERRIDES ===== */
[data-theme="light"] {
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(255, 255, 255, 0.9);

    --color-glass-bg: rgba(255, 255, 255, 0.7);
    --color-glass-bg-light: rgba(249, 250, 251, 0.5);
    --color-glass-border: rgba(0, 0, 0, 0.1);

    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-text-disabled: #d1d5db;
    --color-text-inverse: #ffffff;

    --color-border-primary: rgba(0, 0, 0, 0.1);
    --color-border-secondary: rgba(0, 0, 0, 0.05);

    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(249, 250, 251, 0.4) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* ===== UTILITY CLASSES ===== */

/* Glassmorphism Effects */
.glass-effect {
    background: var(--color-glass-bg);
    backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--color-glass-border);
}

.glass-effect-light {
    background: var(--color-glass-bg-light);
    backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--color-glass-border);
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

.bg-gradient-secondary {
    background: var(--gradient-secondary);
}

/* Text Gradients */
.text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Shadow Utilities */
.shadow-glow-blue {
    box-shadow: var(--shadow-blue);
}

.shadow-glow-purple {
    box-shadow: var(--shadow-purple);
}

.shadow-glow-pink {
    box-shadow: var(--shadow-pink);
}

.shadow-glow-green {
    box-shadow: var(--shadow-green);
}

/* Animation Utilities */
.transition-fast {
    transition: all var(--duration-fast) var(--ease-out);
}

.transition-base {
    transition: all var(--duration-base) var(--ease-in-out);
}

.transition-slow {
    transition: all var(--duration-slow) var(--ease-in-out);
}