/* Slack Theme System */
:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F8F8;
    --bg-tertiary: #F2F2F2;
    --text-primary: #1D1C1D;
    --text-secondary: #616061;
    --text-tertiary: #868686;
    --border: #E8E8E8;
    --accent: #611f69;
    --accent-hover: #4A154B;
    --accent-light: rgba(97, 31, 105, 0.1);
    --accent-text: #611f69;
    --success: #2EB886;
    --error: #E01E5A;
    --warning: #ECB22E;
}

[data-theme="dark"] {
    --bg-primary: #1D1C1D;
    --bg-secondary: #2D2D2D;
    --bg-tertiary: #3D3D3D;
    --text-primary: #D1D2D3;
    --text-secondary: #B0B0B0;
    --text-tertiary: #868686;
    --border: #3D3D3D;
    --accent: #611f69;
    --accent-hover: #7A2C7A;
    --accent-light: rgba(97, 31, 105, 0.4);
    --accent-text: #C586D0;
    --success: #2EB886;
    --error: #E01E5A;
    --warning: #ECB22E;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove focus outline/ring from all buttons (no white border after click) */
button:focus,
button:focus-visible,
a.button-like:focus,
a.button-like:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.theme-card {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.theme-input {
    background-color: var(--bg-primary);
    border-color: var(--border);
    color: var(--text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.theme-text-primary {
    color: var(--text-primary);
}

.theme-text-secondary {
    color: var(--text-secondary);
}

.theme-text-tertiary {
    color: var(--text-tertiary);
}

.theme-accent {
    color: var(--accent);
}

.theme-accent-bg {
    background-color: var(--accent);
    transition: background-color 0.3s ease;
}

.theme-accent-bg:hover {
    background-color: var(--accent-hover);
}

.theme-border {
    border-color: var(--border);
}