/**
 * SafeTradeBot Dashboard Design System
 * Kraken-Style Dark Theme
 * Version: 1.0.0
 */

:root {
    /* ============================================
       COLORS - Dark Theme (Kraken Style)
       ============================================ */
    
    /* Primary Colors */
    --stb-bg-primary: #1E2329;
    --stb-bg-secondary: #2B3139;
    --stb-bg-tertiary: #3A4149;
    --stb-bg-hover: #3A4149;
    
    /* Accent Colors - Enhanced for better contrast and hover states */
    --stb-accent-blue: #3861FB;
    --stb-accent-blue-hover: #5A7DFF;
    --stb-accent-blue-light: rgba(56, 97, 251, 0.15);
    --stb-accent-green: #26A17B;
    --stb-accent-green-hover: #2DB892;
    --stb-accent-green-light: rgba(38, 161, 123, 0.15);
    --stb-accent-red: #F6465D;
    --stb-accent-red-hover: #FF5C73;
    --stb-accent-red-light: rgba(246, 70, 93, 0.15);
    --stb-accent-yellow: #F0B90B;
    --stb-accent-yellow-hover: #FFC933;
    --stb-accent-orange: #FF6B35;
    --stb-accent-orange-hover: #FF8555;
    
    /* Text Colors */
    --stb-text-primary: #FFFFFF;
    --stb-text-secondary: #848E9C;
    --stb-text-tertiary: #5E6673;
    --stb-text-disabled: #3A4149;
    
    /* Border Colors - Enhanced visibility */
    --stb-border-primary: rgba(255, 255, 255, 0.12);
    --stb-border-secondary: rgba(255, 255, 255, 0.06);
    --stb-border-hover: rgba(255, 255, 255, 0.2);
    --stb-border-focus: rgba(56, 97, 251, 0.5);
    
    /* Status Colors */
    --stb-status-success: #26A17B;
    --stb-status-warning: #F0B90B;
    --stb-status-error: #F6465D;
    --stb-status-info: #3861FB;
    --stb-status-running: #26A17B;
    --stb-status-stopped: #F6465D;
    --stb-status-pending: #F0B90B;
    
    /* Chart Colors */
    --stb-chart-line-primary: #3861FB;
    --stb-chart-line-success: #26A17B;
    --stb-chart-line-danger: #F6465D;
    --stb-chart-bg: transparent;
    --stb-chart-grid: rgba(255, 255, 255, 0.1);
    --stb-chart-text: #FFFFFF;
    
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    /* Font Families */
    --stb-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --stb-font-mono: 'Roboto Mono', 'Courier New', 'Courier', monospace;
    
    /* Font Sizes */
    --stb-font-xs: 11px;
    --stb-font-sm: 12px;
    --stb-font-base: 14px;
    --stb-font-md: 16px;
    --stb-font-lg: 18px;
    --stb-font-xl: 20px;
    --stb-font-2xl: 24px;
    --stb-font-3xl: 28px;
    --stb-font-4xl: 32px;
    --stb-font-5xl: 40px;
    
    /* Font Weights */
    --stb-font-light: 300;
    --stb-font-normal: 400;
    --stb-font-medium: 500;
    --stb-font-semibold: 600;
    --stb-font-bold: 700;
    
    /* Line Heights */
    --stb-line-tight: 1.2;
    --stb-line-normal: 1.5;
    --stb-line-relaxed: 1.75;
    
    /* ============================================
       SPACING & SIZING
       ============================================ */
    
    /* Base Spacing Unit */
    --stb-spacing-unit: 4px;
    
    /* Spacing Scale */
    --stb-spacing-1: calc(var(--stb-spacing-unit) * 1);   /* 4px */
    --stb-spacing-2: calc(var(--stb-spacing-unit) * 2);   /* 8px */
    --stb-spacing-3: calc(var(--stb-spacing-unit) * 3);   /* 12px */
    --stb-spacing-4: calc(var(--stb-spacing-unit) * 4);   /* 16px */
    --stb-spacing-5: calc(var(--stb-spacing-unit) * 5);   /* 20px */
    --stb-spacing-6: calc(var(--stb-spacing-unit) * 6);   /* 24px */
    --stb-spacing-8: calc(var(--stb-spacing-unit) * 8);   /* 32px */
    --stb-spacing-10: calc(var(--stb-spacing-unit) * 10); /* 40px */
    --stb-spacing-12: calc(var(--stb-spacing-unit) * 12); /* 48px */
    --stb-spacing-16: calc(var(--stb-spacing-unit) * 16); /* 64px */
    
    /* Grid Gap */
    --stb-grid-gap: var(--stb-spacing-4); /* 16px */
    
    /* Card Padding */
    --stb-card-padding: var(--stb-spacing-5); /* 20px */
    --stb-card-padding-sm: var(--stb-spacing-4); /* 16px */
    --stb-card-padding-lg: var(--stb-spacing-6); /* 24px */
    
    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    
    /* Border Radius */
    --stb-radius-sm: 4px;
    --stb-radius-md: 8px;
    --stb-radius-lg: 12px;
    --stb-radius-xl: 16px;
    --stb-radius-full: 9999px;
    
    /* Border Width */
    --stb-border-width: 1px;
    --stb-border-width-thick: 2px;
    
    /* ============================================
       SHADOWS & EFFECTS
       ============================================ */
    
    /* Box Shadows */
    --stb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --stb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --stb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --stb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    
    /* Glassmorphism */
    --stb-glass-bg: rgba(43, 49, 57, 0.8);
    --stb-glass-border: rgba(255, 255, 255, 0.1);
    --stb-glass-blur: blur(10px);
    
    /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */
    
    /* Transition Durations */
    --stb-transition-fast: 150ms;
    --stb-transition-base: 200ms;
    --stb-transition-slow: 300ms;
    --stb-transition-slower: 500ms;
    
    /* Transition Easing */
    --stb-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --stb-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --stb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ============================================
       LAYOUT
       ============================================ */
    
    /* Container */
    --stb-container-max-width: 1400px;
    --stb-container-padding: var(--stb-spacing-5);
    
    /* Grid Columns */
    --stb-grid-cols-1: repeat(1, minmax(0, 1fr));
    --stb-grid-cols-2: repeat(2, minmax(0, 1fr));
    --stb-grid-cols-3: repeat(3, minmax(0, 1fr));
    --stb-grid-cols-4: repeat(4, minmax(0, 1fr));
    --stb-grid-cols-12: repeat(12, minmax(0, 1fr));
    
    /* Z-Index Scale */
    --stb-z-base: 1;
    --stb-z-dropdown: 1000;
    --stb-z-sticky: 1020;
    --stb-z-fixed: 1030;
    --stb-z-modal-backdrop: 1040;
    --stb-z-modal: 1050;
    --stb-z-popover: 1060;
    --stb-z-tooltip: 1070;
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

body.stb-dashboard-page {
    background-color: var(--stb-bg-primary);
    color: var(--stb-text-primary);
    font-family: var(--stb-font-primary);
    font-size: var(--stb-font-base);
    line-height: var(--stb-line-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Text Utilities */
.stb-text-primary { color: var(--stb-text-primary); }
.stb-text-secondary { color: var(--stb-text-secondary); }
.stb-text-tertiary { color: var(--stb-text-tertiary); }
.stb-text-success { color: var(--stb-status-success); }
.stb-text-danger { color: var(--stb-status-error); }
.stb-text-warning { color: var(--stb-status-warning); }
.stb-text-info { color: var(--stb-status-info); }

.stb-font-mono {
    font-family: var(--stb-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Background Utilities */
.stb-bg-primary { background-color: var(--stb-bg-primary); }
.stb-bg-secondary { background-color: var(--stb-bg-secondary); }
.stb-bg-tertiary { background-color: var(--stb-bg-tertiary); }

/* Spacing Utilities */
.stb-p-1 { padding: var(--stb-spacing-1); }
.stb-p-2 { padding: var(--stb-spacing-2); }
.stb-p-3 { padding: var(--stb-spacing-3); }
.stb-p-4 { padding: var(--stb-spacing-4); }
.stb-p-5 { padding: var(--stb-spacing-5); }
.stb-p-6 { padding: var(--stb-spacing-6); }

.stb-m-1 { margin: var(--stb-spacing-1); }
.stb-m-2 { margin: var(--stb-spacing-2); }
.stb-m-3 { margin: var(--stb-spacing-3); }
.stb-m-4 { margin: var(--stb-spacing-4); }
.stb-m-5 { margin: var(--stb-spacing-5); }
.stb-m-6 { margin: var(--stb-spacing-6); }

/* Border Utilities */
.stb-border { border: var(--stb-border-width) solid var(--stb-border-primary); }
.stb-border-secondary { border-color: var(--stb-border-secondary); }
.stb-rounded { border-radius: var(--stb-radius-md); }
.stb-rounded-lg { border-radius: var(--stb-radius-lg); }

/* Shadow Utilities */
.stb-shadow-sm { box-shadow: var(--stb-shadow-sm); }
.stb-shadow-md { box-shadow: var(--stb-shadow-md); }
.stb-shadow-lg { box-shadow: var(--stb-shadow-lg); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile First Approach */
@media (min-width: 640px) {
    :root {
        --stb-container-padding: var(--stb-spacing-6);
    }
}

@media (min-width: 768px) {
    :root {
        --stb-container-padding: var(--stb-spacing-8);
    }
}

@media (min-width: 1024px) {
    :root {
        --stb-container-padding: var(--stb-spacing-10);
    }
}

@media (min-width: 1280px) {
    :root {
        --stb-container-padding: var(--stb-spacing-12);
    }
}