:root {
    --ketchup: #bc2020;
    --mustard: #f2b705;
    --bun: #f5d6a7;
    --dark: #332211;
    --white: #ffffff;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--dark);
    margin: 0;
    background-color: #fffaf0;
}

h1, h2, h3 { font-family: 'Bangers', cursive; letter-spacing: 2px; }

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

header {
    background: var(--ketchup);
    color: var(--white);
    padding: 1rem 0;
    border-bottom: 8px solid var(--mustard);
}

.logo { font-size: 2.5rem; margin: 0; color: var(--bun); }
.logo span { color: var(--white); }

nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
nav a { color: var(--white); text-decoration: none; font-weight: bold; }
nav a:hover { color: var(--mustard); }

.hero { 
    background: var(--bun); 
    padding: 40px; 
    border-radius: 50px; /* Hotdog shape! */
    text-align: center;
    border: 3px dashed var(--ketchup);
}

button, .btn-submit {
    background: var(--mustard);
    color: var(--dark);
    border: none;
    padding: 12px 24px;
    font-family: 'Bangers';
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
}

button:hover { background: var(--ketchup); color: white; }

/* Accessibility: Clear focus states */
a:focus, button:focus { outline: 3px solid var(--mustard); }