/* Theme Variables */
:root {
    /* Colors */
    --color-background: #1a1a1a;
    --color-surface: #2a2a2a;
    --color-surface-hover: #303030;
    --color-border: #333;
    --color-text: #f0f0f0;
    --color-text-muted: #4CAF50;
    --color-primary: #4CAF50;
    --color-primary-bright: #5fd664;
    --color-primary-hover: #45a049;
    --color-primary-transparent: rgba(40, 167, 69, 0.25);
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-table-text: #333333;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;

    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
}

/* Base styles */
/* body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
} */


@media (prefers-color-scheme: dark) {
    .light-only {
        display: none;
    }

    .dark-only {
        display: initial;
    }
}

@media (prefers-color-scheme: light) {
    .dark-only {
        display: none;
    }

    .light-only {
        display: initial;
    }
}