/* ─────────────  THEME VARIABLES  ───────────── */
:root {
  /* brand colours sampled from roastingroberta.com screenshot */
  --rr-coral:  #f55d40;   /* logo + CTA buttons              */
  --rr-honey:  #f6c756;   /* icons + secondary buttons       */
  --rr-blue:   #6294D8;   /* grid lines                      */
  --rr-gray:   #445268;   /* input text / placeholder        */
  --rr-bg:     #ffffff;   /* card & form background          */

  --rr-radius: 16px;
  --rr-shadow: 0 6px 12px rgba(30,30,55,.06);
  --rr-grid:   110px;     /* square size – tweak if needed   */
}

/* ─────────────  GLOBAL RESET  ───────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: "Inter", system-ui, sans-serif;
  color: var(--rr-gray);
  background:
    linear-gradient(to right, var(--rr-blue) 2px, transparent 2px),
    linear-gradient(to bottom, var(--rr-blue) 2px, transparent 2px);
  background-size: var(--rr-grid) var(--rr-grid);
  min-height:100vh;
}

/* ─────────────  HEADER  ───────────── */
.header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 32px;
}
.logo{
  font-family:"Fredoka", sans-serif;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:700;letter-spacing:-.5px;
  color:var(--rr-coral);
}
.nav-btn{
  width:32px;height:32px;display:grid;place-content:center;
  cursor:pointer;border:none;background:none;
}
.nav-btn::before{
  content:"≡";font-size:1.8rem;line-height:1;color:var(--rr-honey);
}

/* ─────────────  SEARCH BAR  ───────────── */
.search-wrapper{
  max-width:640px;margin:48px auto;display:flex;gap:4px;
  background:var(--rr-bg);border-radius:var(--rr-radius);box-shadow:var(--rr-shadow)
}
.search-icon{
  display:grid;place-content:center;
  width:64px;font-size:1.4rem;color:var(--rr-honey)
}
.search-input{
  flex:1;padding:20px 14px;font:600 1.1rem/1 "Inter",sans-serif;
  border:none;outline:none;color:var(--rr-gray)
}
.search-input::placeholder{color:var(--rr-gray);opacity:.6}
.search-btn{
  background:var(--rr-coral);color:#fff;font-weight:700;
  border:none;padding:0 32px;border-radius:0 var(--rr-radius) var(--rr-radius) 0;
  cursor:pointer;font-size:1.1rem;transition:filter .2s
}
.search-btn:hover{filter:brightness(1.07)}

/* ─────────────  UTILITY BUTTONS  ───────────── */
.rr-btn{
  display:inline-block;background:var(--rr-bg);
  padding:18px 42px;border-radius:var(--rr-radius);
  font:600 1.05rem "Fredoka",sans-serif;color:var(--rr-honey);
  box-shadow:var(--rr-shadow);border:1px solid #eee;
  transition:transform .2s ease
}
.rr-btn:hover{transform:translateY(-3px)}

/* ─────────────  CARD GRID (optional)  ───────────── */
.card-grid{
  display:grid;gap:26px;padding:56px 32px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}
.card{
  background:var(--rr-bg);border-radius:var(--rr-radius);
  box-shadow:var(--rr-shadow);overflow:hidden
}
.card img{width:100%;display:block}
.card h3{font-family:"Fredoka";font-size:1.25rem;padding:16px;color:var(--rr-coral)}