:root {
    --primary-color: #6c9c3f; /* Deep green */
    --secondary-color: #e1a948; /* Rich golden yellow */
    --accent-color: #ffffff; /* Crisp white */
    --warning-color: #d9534f; /* Bold red for warnings */
    --font-primary: 'Inter', sans-serif;
    --font-accent: 'Roboto', sans-serif;
}

.btn-xs {
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    line-height: 1.4;
    border-radius: 0.2rem;
}

.btn-white {
    background-color: var(--accent-color);
    color: #333;
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-white:hover {
    background-color: var(--primary-color);
    color: var(--accent-color);
}

/* Typography and Body */
body {
    font-family: var(--font-primary);
    background-color: var(--accent-color);
    color: #333;
}

main {
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/img/backgrounds/cookies-3918049.jpg);
    background-size: cover;
    background-position: center;
}

/* Navbar */
.navbar {
    background-color: var(--primary-color);
    color: var(--accent-color);
    border-radius: 8px;
}

.navbar a {
    color: #1f1f1f;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.navbar a:hover {
    color: var(--secondary-color);
}

/* Parents mode */
.parents-mode {
    background-color: var(--warning-color);
    color: white;
    margin-bottom: 6px;
}
.pin-container {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pin-input {
  height: 60px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  padding: 0 15px;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-radius: 6px;
    color: var(--accent-color);
    transition: background-color 0.2s ease;
}
.btn-primary:hover {
    background-color: var(--secondary-color);
}

/* Cards */
.card {
    border-radius: 8px;
    background-color: var(--accent-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 80px 20px;
    background: var(--primary-color);
    color: var(--accent-color);
    font-family: var(--font-accent);
}
.hero h1 {
    font-size: 2.5rem;
}









.card {
    margin-bottom: 2px;
}

.completed-chore {
    background-color: #58df69;
}

.completed-chore .card-body {
    padding-bottom: 2px;
    padding-top: 2px;
}

.completed-chore .card-title {
    font-size: 0.9em;
    padding-top: 3px;
    margin-bottom: 0px;
}

.chore-add {
    margin-top: 3px;
}

.chore-incomplete {
    margin-top: -6px;
    margin-bottom: -3px;
}

.user-icon {
    border-radius: 5px;
    max-height: 48px;
}

/* Animations */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.shake {
  animation: shake 0.5s;
}