/* Shared styles for Mint & Flour */
/* Colors are defined in css/colors.css */

html,body{margin:0;padding:0}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--charcoal);
  background: linear-gradient(180deg, var(--cream), #fff 60%);
}

.container{max-width:1120px;margin:0 auto;padding:clamp(16px,3vw,32px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.2rem;border-radius:999px;font-weight:600;text-decoration:none;transition:all .2s ease;border:1px solid transparent}
.btn-primary{background:var(--mint);color:#0e2b10;border-color:#9fc79c;box-shadow:0 4px 18px var(--shadow-200)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--shadow-200)}
.btn-ghost{background:transparent;color:var(--charcoal);border-color:#d9d9d9}
.btn-ghost:hover{background:#f7f7f7}

/* Header / brand */
header .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo{width:36px;height:36px;border-radius:10px;background:radial-gradient(circle at 30% 25%, #cfe8cb,var(--mint));display:grid;place-items:center;box-shadow:0 2px 8px var(--shadow-100)}
.logo svg{width:22px;height:22px}
nav a{color:#333;text-decoration:none;margin-left:1rem;font-weight:500}
nav a:hover{opacity:.8}

/* Cards and media */
.card{background:#fff;border:1px solid #eee;border-radius:18px;padding:22px;box-shadow:0 8px 22px var(--shadow-100)}
.card h3{margin:.2rem 0 .5rem;font-size:1.1rem}
.card p{margin:0;color:var(--charcoal-2)}

.media-card{background:#fff;border:1px solid #eee;border-radius:24px;overflow:hidden;box-shadow:0 10px 30px var(--shadow-100)}
.media-card img{display:block;width:100%;height:auto}

/* Layout utilities */
.section{padding-block: clamp(32px,8vw,96px)}
.section h2{font-family:'Playfair Display', serif;font-size: clamp(26px,3.2vw,42px);margin:0 0 18px}
.grid-3{display:grid;gap:22px;grid-template-columns: repeat(3, 1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}

.muted{color:var(--muted)}

/* Newsletter */
.newsletter{display:grid;gap:16px;grid-template-columns:1fr auto;align-items:center;background:linear-gradient(180deg,#ffffff,var(--cream));border:1px solid #eee;border-radius:20px;padding:18px}
@media (max-width:720px){.newsletter{grid-template-columns:1fr}}
.newsletter input{appearance:none;-webkit-appearance:none;width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:12px;font-size:1rem}
.newsletter small{color:var(--charcoal-2)}

footer{border-top:1px solid #eee;padding-block:28px;color:#666}