/**
 * TM Webpanel - CSS Variables
 * Design-Tokens basierend auf tm_shop
 */

:root {
    /* Primary Colors */
    --tm-bg-primary: #1a1a1a;
    --tm-bg-secondary: #242424;
    --tm-bg-tertiary: #2d2d2d;
    --tm-bg-hover: #363636;

    /* Accent Colors */
    --tm-accent: #c9a76c;
    --tm-accent-dark: #a88b54;
    --tm-accent-light: #ddc08a;

    /* Text Colors */
    --tm-text-primary: #e8e8e8;
    --tm-text-secondary: #a0a0a0;
    --tm-text-muted: #666666;

    /* Border Colors */
    --tm-border: #3a3a3a;
    --tm-border-light: #4a4a4a;

    /* Status Colors */
    --tm-success: #4caf50;
    --tm-success-bg: rgba(76, 175, 80, 0.1);
    --tm-error: #e74c3c;
    --tm-error-bg: rgba(231, 76, 60, 0.1);
    --tm-warning: #f39c12;
    --tm-warning-bg: rgba(243, 156, 18, 0.1);
    --tm-info: #3498db;
    --tm-info-bg: rgba(52, 152, 219, 0.1);

    /* Fonts */
    --tm-font-primary: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --tm-font-display: 'Georgia', serif;
    --tm-font-mono: 'Consolas', 'Monaco', monospace;

    /* Sizing */
    --tm-sidebar-width: 250px;
    --tm-header-height: 60px;
    --tm-border-radius: 8px;
    --tm-border-radius-sm: 4px;
    --tm-border-radius-lg: 12px;

    /* Shadows */
    --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --tm-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --tm-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Transitions */
    --tm-transition-fast: 0.15s ease;
    --tm-transition: 0.2s ease;
    --tm-transition-slow: 0.3s ease;

    /* Z-Index */
    --tm-z-dropdown: 100;
    --tm-z-modal: 200;
    --tm-z-toast: 300;
}

/* Dark Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--tm-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--tm-border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tm-accent);
}