/**
 * R1BBIT Theme Variables
 * Central theme configuration - change colors here to update the entire application
 */

:root {
    /* Primary gradient - dark blue (background, headers) */
    --gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    --gradient-start: #1e3a5f;
    --gradient-end: #2d4a6f;

    /* Accent colors - teal (buttons, links, highlights) */
    --color-accent: #17a2b8;
    --color-accent-hover: #138496;
    --color-accent-dark: #117a8b;
    --color-accent-light: #5bc0de;

    /* Accent rgba for shadows and overlays */
    --color-accent-shadow: rgba(23, 162, 184, 0.3);
    --color-accent-shadow-strong: rgba(23, 162, 184, 0.4);
    --color-accent-overlay: rgba(23, 162, 184, 0.1);

    /* Secondary accent - orange (special buttons like Code Editor) */
    --color-secondary: #fd7e14;
    --color-secondary-hover: #e96b02;
    --color-secondary-dark: #dc6502;
    --color-secondary-shadow: rgba(253, 126, 20, 0.3);

    /* Status colors */
    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-info: #3b82f6;
    --color-info-hover: #2563eb;

    /* Neutral colors */
    --color-text-primary: #1f2937;
    --color-text-secondary: #4b5563;
    --color-text-muted: #6b7280;
    --color-text-light: #9ca3af;

    /* Background colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-dark: #1e1e1e;
    --color-bg-darker: #2d2d2d;

    /* Sidebar colors (slightly lighter than primary gradient) */
    --sidebar-bg-start: #2a4a6f;
    --sidebar-bg-end: #3a5a7f;
    --sidebar-bg: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);

    /* Border colors */
    --color-border: #e0e0e0;
    --color-border-light: #e5e7eb;
    --color-border-dark: #d1d5db;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 20px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* Common styles using theme variables */
body.themed {
    background: var(--gradient-primary);
}

.themed .header {
    background: var(--gradient-primary);
}

.themed .btn-primary {
    background: var(--color-accent);
}

.themed .btn-primary:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 5px 15px var(--color-accent-shadow);
}

.themed .btn-success {
    background: var(--color-success);
}

.themed .btn-success:hover {
    background: var(--color-success-hover);
}

.themed .btn-danger {
    background: var(--color-danger);
}

.themed .btn-danger:hover {
    background: var(--color-danger-hover);
}

/* Accent elements */
.themed a {
    color: var(--color-accent);
}

.themed a:hover {
    color: var(--color-accent-hover);
}

/* Focus states */
.themed input:focus,
.themed select:focus,
.themed textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-overlay);
}

/* Table headers */
.themed th {
    background: var(--color-accent);
}

/* Card borders */
.themed .card h2 {
    border-bottom-color: var(--color-accent);
}

/* Modal headers */
.themed .modal-header {
    background: var(--gradient-primary);
}

/* Status indicators */
.themed .status-dot.connected {
    background: var(--color-success);
}

/* Tabs */
.themed .tab.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

/* Resizer */
.themed .resizer:hover {
    background: var(--color-accent);
}