@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --bg-main: #f8f5ef;
    --bg-card: #ffffff;
    --bg-header: #e8e3d5;
    --bg-row: #fdfcf9;
    --bg-row-alt: #f9f7f2;
    --border-main: #c9c2ae;
    --border-light: #e0dac8;
    --text-dark: #3d3425;
    --text-mid: #5c5240;
    --text-light: #8a8272;
    --accent-green: #2d8a4e;
    --accent-green-light: #d4edda;
    --accent-gold: #d4a017;
    --accent-blue: #2563eb;
    --accent-red: #c0392b;

    /* Artisan/Quality Badges */
    --badge-keg: #7e22ce;
    --badge-jar: #c2410c;
    --badge-dry: #334155;
    --badge-smoke: #2563eb;
    --badge-raw: #525252;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg-main);
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

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

@media (min-width: 640px) {
    .container {
        padding: 40px 20px;
    }
}

/* Common Components */
.btn-primary {
    background: var(--accent-green);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.2s;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    opacity: 0.9;
}

.badge {
    font-size: 10px;
    background: var(--accent-gold);
    color: white;
    padding: 2px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    font-weight: 800;
}

.badge.live {
    background: var(--accent-green);
}

.badge.soon {
    background: var(--text-mid);
}

/* Shared Tip Card Styling */
.tip-card {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
}