/* ==========================================================================
   THEME 1: RUSTIKAL & TRADITIONELL (Klassisch, warm, gemütlich)
   ========================================================================== */

:root {
    --rustic-bg: #fcf8f2;
    --rustic-surface: #ffffff;
    --rustic-text: #3e2723;
    --rustic-text-light: #5c5856;
    --rustic-primary: #d84315;
    --rustic-primary-hover: #bf360c;
    --rustic-secondary: #4e342e;
    --rustic-accent: #ffb74d;
    --rustic-border: #e0d4c3;
    
    --rustic-font-main: "Georgia", Times, serif;
    --rustic-font-sans: "Arial", sans-serif;
    
    --rustic-radius-sm: 4px;
    --rustic-radius-md: 6px;
    
    --rustic-shadow: 0 4px 6px rgba(0,0,0,0.1);
    --rustic-shadow-hover: 0 6px 12px rgba(0,0,0,0.15);
}

/* App Base Styles */
.theme-rustic {
    background-color: var(--rustic-bg);
    color: var(--rustic-text);
    font-family: var(--rustic-font-main);
}

.theme-rustic h1, 
.theme-rustic h2, 
.theme-rustic h3 {
    font-family: var(--rustic-font-main);
    color: var(--rustic-secondary);
}

/* Buttons */
.theme-rustic .btn {
    background-color: var(--rustic-primary);
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: var(--rustic-radius-sm);
    font-family: var(--rustic-font-sans);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: var(--rustic-shadow);
    transition: background-color 0.2s, transform 0.1s;
}

.theme-rustic .btn:hover {
    background-color: var(--rustic-primary-hover);
}

.theme-rustic .btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Cards */
.theme-rustic .card {
    background: var(--rustic-surface);
    border: 1px solid var(--rustic-border);
    border-radius: var(--rustic-radius-md);
    padding: 20px;
    box-shadow: var(--rustic-shadow);
    font-family: var(--rustic-font-sans);
    transition: transform 0.2s, box-shadow 0.2s;
}

.theme-rustic .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--rustic-shadow-hover);
}

/* Navigation / Header Bar */
.theme-rustic .nav-bar {
    background-color: var(--rustic-secondary);
    color: #ffffff;
    padding: 16px 20px;
    border-bottom: 4px solid var(--rustic-accent);
}