:root{
  --primary:#faa01d;
  --secondary:#23cad6;
  --accent-1:#91d02d;
  --accent-2:#ea5560;
  --bg:#ffffff;
  --text:#222222;
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

header{
  padding:1rem;
  border-bottom:1px solid #eee;
}
header .brand{font-family:'Gorditas', cursive; color:var(--primary); font-size:1.5rem}
nav a{margin-right:1rem; color:var(--secondary); text-decoration:none}

.container{max-width:960px; margin:0 auto; padding:1rem}

.btn{display:inline-block; padding:.6rem 1rem; border-radius:.5rem; border:0; cursor:pointer; font-weight:700}
.btn-primary{background:var(--primary); color:#000}
.btn-secondary{background:var(--secondary); color:#fff}

.card{background:#fff; border:1px solid #eee; border-radius:.5rem; padding:1rem; margin-bottom:1rem}
.badge{display:inline-block; padding:.2rem .5rem; border-radius:.4rem; background:#eee; font-size:.8rem}

form label{display:block; font-weight:700; margin:.5rem 0 .2rem}
form input, form select{width:100%; padding:.6rem; border:1px solid #ccc; border-radius:.4rem}
form .actions{margin-top:1rem}

.flash{padding:.8rem 1rem; border-radius:.4rem; margin-bottom:1rem}
.flash-success{background:#e9f8ef; color:#0b7a34}
.flash-error{background:#fde8ea; color:#b00020}

/* Mobile-first layout */
.grid{display:grid; grid-template-columns:1fr; gap:1rem}
@media (min-width: 768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}