/* ============================================
   Design Tokens — Bingão Dashboard
   Premium Futuristic Dark Theme
   ============================================ */

:root {
    /* === Backgrounds === */
    --bg-base:        #060913;
    --bg-surface:     rgba(16, 22, 35, 0.65);
    --bg-card:        rgba(22, 30, 46, 0.55);
    --bg-card-hover:  rgba(32, 40, 56, 0.7);
    --bg-sidebar:     rgba(10, 15, 25, 0.85);
    --bg-input:       rgba(0, 0, 0, 0.2);

    /* === Borders === */
    --border-subtle:  rgba(255, 255, 255, 0.04);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong:  rgba(255, 255, 255, 0.16);

    /* === Brand Accent === */
    --accent-primary:        #8B5CF6;
    --accent-primary-light:  #A78BFA;
    --accent-primary-glow:   rgba(139, 92, 246, 0.28);
    --accent-secondary:      #38BDF8;
    --accent-secondary-glow: rgba(56, 189, 248, 0.2);
    --accent-gold:           #FBBF24;
    --accent-gold-glow:      rgba(251, 191, 36, 0.22);
    --accent-emerald:        #34D399;
    --accent-emerald-glow:   rgba(52, 211, 153, 0.2);

    /* === Status === */
    --status-online:       #34D399;
    --status-online-glow:  rgba(52, 211, 153, 0.3);
    --status-online-bg:    rgba(52, 211, 153, 0.08);
    --status-offline:      #F87171;
    --status-offline-glow: rgba(248, 113, 113, 0.3);
    --status-offline-bg:   rgba(248, 113, 113, 0.08);
    --status-warning:      #FBBF24;
    --status-pending:      #FBBF24;
    --status-maintenance:  #38BDF8;
    --status-unknown:      #4B5A6E;

    /* === Text === */
    --text-primary:   #F1F5F9;
    --text-secondary: #8B9CB6;
    --text-muted:     #8B9CB6;
    --text-light:     #FFFFFF;
    --text-accent:    #A78BFA;

    /* === Colors === */
    --color-primary-50:  #F5F3FF;
    --color-primary-100: #EDE9FE;
    --color-primary-200: #DDD6FE;
    --color-primary-300: #C4B5FD;
    --color-primary-400: #A78BFA;
    --color-primary-500: #8B5CF6;
    --color-primary-600: #7C3AED;
    --color-primary-700: #6D28D9;
    --color-primary-800: #5B21B6;
    --color-primary-900: #4C1D95;

    --color-secondary-50:  #F0F9FF;
    --color-secondary-100: #E0F2FE;
    --color-secondary-200: #BAE6FD;
    --color-secondary-300: #7DD3FC;
    --color-secondary-400: #38BDF8;
    --color-secondary-500: #0EA5E9;
    --color-secondary-600: #0284C7;
    --color-secondary-700: #0369A1;
    --color-secondary-800: #075985;
    --color-secondary-900: #0C4A6E;

    --color-success-light: #D1FAE5;
    --color-success:       #10B981;
    --color-success-dark:  #059669;
    --color-error-light:   #FEE2E2;
    --color-error:         #EF4444;
    --color-error-dark:    #DC2626;
    --color-warning-light: #FEF3C7;
    --color-warning:       #F59E0B;
    --color-warning-dark:  #D97706;
    --color-info-light:    #E0F2FE;
    --color-info:          #0EA5E9;
    --color-info-dark:     #0369A1;

    --color-neutral-50:  #F8FAFC;
    --color-neutral-100: #F1F5F9;
    --color-neutral-200: #E2E8F0;
    --color-neutral-300: #64748B;
    --color-neutral-400: #475569;
    --color-neutral-500: #334155;
    --color-neutral-600: #1E293B;
    --color-neutral-700: #162033;
    --color-neutral-800: #0C1018;
    --color-neutral-900: #07090F;

    /* === Spacing === */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* === Typography === */
    --font-display: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Exo 2', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'DM Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;
    --font-size-4xl:  2.25rem;
    --font-size-5xl:  3rem;

    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    --line-height-tight:   1.25;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;

    /* === Border Radius === */
    --radius-none: 0;
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* === Shadows (Glow effects for dark theme) === */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.35);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
    --shadow:     0 4px 12px rgba(0,0,0,0.45);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
    --shadow-lg:  0 10px 30px rgba(0,0,0,0.6);
    --shadow-xl:  0 20px 50px rgba(0,0,0,0.7);
    --shadow-2xl: 0 25px 60px rgba(0,0,0,0.8);
    
    --glow-primary:   0 0 15px rgba(139, 92, 246, 0.2);
    --glow-secondary: 0 0 15px rgba(56, 189, 248, 0.2);
    --glow-success:   0 0 15px rgba(52, 211, 153, 0.2);
    --glow-error:     0 0 15px rgba(248, 113, 113, 0.2);

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 450ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-all:  all var(--transition-base);

    /* === Z-Index === */
    --z-base:           0;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-modal-backdrop: 400;
    --z-modal:          500;
    --z-popover:        600;
    --z-tooltip:        700;

    /* === Layout === */
    --sidebar-width:      260px;
    --sidebar-icon-width: 70px;
}