/* Avarr Community Hub - Main Styles */

:root {
    --ach-primary: #2271b1;
    --ach-secondary: #135e96;
    --ach-accent: #00a32a;
    --ach-text: #1d2327;
    --ach-text-light: #50575e;
    --ach-border: #dcdcde;
    --ach-bg: #f0f0f1;
    --ach-white: #ffffff;
    --ach-radius: 8px;
}

.ach-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.ach-card {
    background: var(--ach-white);
    border: 1px solid var(--ach-border);
    border-radius: var(--ach-radius);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ach-button {
    background: var(--ach-primary);
    color: var(--ach-white);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.ach-button:hover {
    background: var(--ach-secondary);
}

.ach-button-secondary {
    background: var(--ach-bg);
    color: var(--ach-text);
}

.ach-grid {
    display: grid;
    gap: 20px;
}

.ach-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ach-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ach-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ach-loading {
    text-align: center;
    padding: 40px;
    color: var(--ach-text-light);
}

.ach-loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}